# Media
> Images, images that zoom, and YouTube and SoundCloud embeds.
Images are plain `` elements, scaled to the content width. Wrap one in `` with a `` for a caption.
## Internal Images
Reference images from your project; every file that is not a page is copied to the output at the same path:
**HTML**
```html
```
**Markdown**
```md
```
A relative `src`, `srcset` or `poster` is resolved from the page's source file, so it keeps working at the page's folder URL, under a language prefix, or at another ``.
Renders as:
An htmlpress docs page.
## External Images
Reference images from external URLs:
**HTML**
```html
```
**Markdown**
```md
```
Renders as:
## Base64 Images
Embed small images directly using data URIs:
**HTML**
```html
```
**Markdown**
```md
```
Renders as:
## Themed Images
`data-theme="light"` or `data-theme="dark"` on an `` shows it in that theme only, following the header's theme toggle as well as the system setting; Livemark's `#light` and `#dark` endings on the `src` work too. Put the pair side by side:
**HTML**
```html
```
**Markdown**
```md
```
Renders as (toggle the theme to switch):
The page's Markdown copy keeps only the light image.
## Image Zooming
Every image in a page opens full screen on click, unless a link wraps it; a click anywhere closes it. It works with internal, external and base64 images alike.
**HTML**
```html
```
**Markdown**
```md
```
Renders as (click it):
## Video Blocks
`` plays the video at its `url` (a `watch`, `youtu.be`, `embed`, `shorts` or `live` URL); without the script it stays a link:
**HTML**
```html
```
**Markdown**
```md
::video{type="youtube" url="https://www.youtube.com/watch?v=dQw4w9WgXcQ"}
```
Renders as:
## Audio Blocks
`` plays the track at its `url`; without the script it stays a link:
**HTML**
```html
```
**Markdown**
```md
::audio{type="soundcloud" url="https://soundcloud.com/flume/never-be-like-you-feat-kai"}
```
Renders as:
```
**Markdown**
```md
```
A relative `src`, `srcset` or `poster` is resolved from the page's source file, so it keeps working at the page's folder URL, under a language prefix, or at another ``.
Renders as:
An htmlpress docs page.
## External Images
Reference images from external URLs:
**HTML**
```html
```
**Markdown**
```md
```
Renders as:
## Themed Images
`data-theme="light"` or `data-theme="dark"` on an `
```
**Markdown**
```md
```
Renders as (toggle the theme to switch):
The page's Markdown copy keeps only the light image.
## Image Zooming
Every image in a page opens full screen on click, unless a link wraps it; a click anywhere closes it. It works with internal, external and base64 images alike.
**HTML**
```html
```
**Markdown**
```md
```
Renders as (click it):
## Video Blocks
`