# Media

The **Media** block shows an image or a video, with its caption. This page describes choosing the file, the alt text, the framing per screen, the playback modes of a video, its subtitles and its link.

## Add media

1. In the editor, open the inserter and choose **Media**, or search for `image`, `photo`, `video` or `gif`. [Add a block](https://lovelyrender.com/documentation/add-block/) details the ways to insert a block.
2. Click **Click to choose a media file, or drop one here.** to take a file from the media library or upload one. The block accepts images and videos.
3. If you have no photo of your own, click **Search Pexels**. [Find a photo on Pexels](https://lovelyrender.com/documentation/find-pexels-photo/) describes the search and the import.
4. In the **Settings** tab, describe the image in the **Alt text** field.

During the upload, **Uploading…** replaces the preview. To change the file, click **Replace** in the block toolbar. The **Pexels** button in the same toolbar opens the Pexels search.

For a caption, insert a paragraph or a heading inside the block: it is published under the image and attached to it. [Credit your photos and videos](https://lovelyrender.com/documentation/credit-photos-videos/) explains how to show the media’s author there.

A gallery is built with a [Container](https://lovelyrender.com/documentation/container-block/) set to **Grid** and filled with Media blocks.

## Media panel

| Setting | Effect | Default value |
| --- | --- | --- |
| **Decorative image** | Marks the image as having no function and no information of its own. The alt text disappears and screen readers skip the image. | Off |
| **Alt text** | The description read by screen readers and search engines. Changing it here only changes this block. | The file’s alt text in the media library |
| **Maximum size** | The largest version of the image that the site can serve, among those created for this file. Within this limit, the site serves the one best suited to the screen. | The original |
| **Wrap text to shape** | The neighboring text follows the outline of the drawing. For an SVG file only. The caption is then disabled. | Off |
| **Shape text margin** | The space between the shape and the text, taken from the site’s spacing scale. | None |
| **Inline SVG** | Writes the SVG drawing into the page instead of displaying it as an image. Useful for an animated SVG. For an SVG file only. | Off |

![The Media panel of a photo: Decorative image turned off, the Alt text describing the vineyard rows, then Maximum size on Original (1600 x 1067 px).](https://static.lovelyrender.com/uploads/2026/10/881-doc-blocs-media.png)

An inline SVG takes the block’s text color wherever the file asks for it. It can be animated with the **Draw** effect in the **Animations** tab. It has no alt text: the panel shows **Alt text does not exist for an inline SVG, which is decorative by nature.** An image that carries information stays an image.

Without a file, the panel offers a **Scroll animation**: a sequence of images that the visitor steps through by scrolling the page. [Animate on scroll](https://lovelyrender.com/documentation/animate-on-scroll/) describes it.

## Image settings panel

| Setting | Effect | Default value |
| --- | --- | --- |
| **Behavior** | **Default** : the natural size. **Proportional** : the image fits in its container while keeping its proportions. **Cover** : it fills the whole frame, even if it gets cropped. **Contain** : it is shown whole, even if that leaves margins. | **Proportional** |
| Focal point, **Horizontal**, **Vertical** | In **Cover** or **Contain**, the point of the image kept at the center of the framing, using a nine-cell grid or percentages. Adjustable screen by screen. | The center |
| **Width** | A forced width in pixels. When empty, the width is automatic. | Empty |
| **Height** | A forced height in pixels. When empty, the height is automatic. | Empty |

In **Proportional**, only one dimension is set at a time: the other is calculated. In **Cover** or **Contain**, a forced dimension shows a warning that the image will be cropped or surrounded by margins.

![The Image settings panel: Behavior on Cover, the Mobile tab chosen among the screens, the focal point grid on the left cell, Horizontal at 0% and Vertical at 50%.](https://static.lovelyrender.com/uploads/2026/10/236-images-cadrage.png)

A screen’s focal point takes precedence over the one in the **Overall** tab, even when it returns to the center. A screen without its own focal point takes the one from the **Overall** tab.

## Video settings panel

When the file is a video, the **Video settings** panel opens inside the **Media** panel. Its first setting, **Playback**, controls the others.

| Playback value | Behavior |
| --- | --- |
| **Manual** (default) | The visitor starts the video from its player. The next four settings apply as you set them. |
| **Plays once when visible** | The video starts on its own when it comes into view, with no player and no sound. It stops at the end and does not replay. |
| **Loops while visible** | The video loops, with no player and no sound, pauses when it leaves the screen and resumes when it comes back. |
| **On hover** | The video plays when the pointer enters it, or the link or card that contains it. It goes back to its start when the pointer leaves. Reaching that link with the keyboard starts it. On a screen without a mouse, it loops while visible. |
| **Follows the scroll** | The video moves forward and backward with the scrolling of the page. See [Animate on scroll](https://lovelyrender.com/documentation/animate-on-scroll/). |

| Setting | Effect | Default value |
| --- | --- | --- |
| **Show a pause button** | Places a button on the video that lets the visitor stop it. In **Loops while visible** and **On hover** only. | On |
| **Loop** | Restarts the video at the end. | Off |
| **Muted** | Turns the sound off. | Off |
| **Player controls** | Shows the playback controls, including the subtitles menu. | On |
| **Preload** | The data the browser downloads before playback: **Auto**, **Metadata** or **None**. | **Metadata** |
| **Cover image** | The image shown before playback. **Use default image** goes back to the thumbnail created by the site. | The thumbnail created by the site |

![The Video settings panel: Playback on Loop while visible, the banner The playback mode controls the settings below, Show a pause button turned on, then Loop, Muted and Player controls grayed out.](https://static.lovelyrender.com/uploads/2026/10/182-blocs-video.png)

In the four modes without a player, **Loop**, **Muted**, **Player controls** and **Preload** are grayed out. They show the imposed value: no controls, sound off and **None** for preloading. The file is only downloaded when the video becomes visible, or on the first hover. Going back to **Manual** brings back the settings you had set.

The pause button is a circle placed at the bottom right of the video. A visitor who presses it stops the video until they press again, even if they leave the section and come back. Screen readers announce it as **Pause the video**.

**Warning:** A video that moves on its own for more than five seconds must be stoppable. Without a pause button, the panel says so and the **Accessibility** panel flags it. Reserve **Plays once when visible** for a short, silent shot that carries no information.

## Add subtitles

The **Subtitles and text tracks** section ends the **Video settings** panel. A track is a WebVTT file (`.vtt`) offered in the player menu. The visitor turns it on if they want: it is never imposed.

1. In the **Subtitles and text tracks** section, click **Add a text track**. The media library opens on the `.vtt` files.
2. Choose or upload the file. A card with the file’s name appears in the section.
3. Set its **Kind**, its **Name shown in the player** and its **Language code**, for example `fr`.

| Kind | Content | Audience |
| --- | --- | --- |
| **Subtitles for the deaf and hard of hearing (same language, sounds included)** | The dialogue in the video’s language and the sounds that carry meaning. Kind chosen by default. | Deaf or hard-of-hearing people. |
| **Subtitles (translation)** | The translation of the dialogue. | Visitors who do not understand the spoken language. |
| **Audio description (written)** | The description of what is shown on screen. | Blind or low-vision people. |

![The Subtitles and text tracks section with two tracks: domaine-description-fr.vtt as Audio description (written), named Description (français), code fr, then domaine-description-en.vtt named Description (English).](https://static.lovelyrender.com/uploads/2026/10/239-images-pistes.png)

As long as a track has no language code and no name, the panel shows **Give each track a language code and a name: the player menu shows nothing else.** **Remove this track** detaches it from the video. The file stays in the media library.

**Note:** Tracks go through the player menu: no one can open them without **Player controls** or in the modes without a player. They belong to the block. The same video placed elsewhere comes without its tracks.

## Advanced panel

| Setting | Effect | Default value |
| --- | --- | --- |
| **HTML anchor** | An identifier to point to this block with an address ending in `#`. | Empty |
| **Lazy loading** | The media only loads as it nears the screen. Turn it off for the large image visible as soon as the page opens. | On |

## Link panel

The **Link** panel makes the image or the video clickable. Its settings are those of all blocks that carry a link; [Container](https://lovelyrender.com/documentation/container-block/) details them. A link to a file in the media library always opens in an overlay: a thumbnail enlarges without leaving the page.

**Warning:** On a clickable image, fill in the **Accessible name** of the **Link** panel. The alt text describes the image and the accessible name says where the click leads, for example “See the armchair details”.

## Styles tab

The media is set in the **Default**, **Hover** and **Active** states. From its insertion it carries the **Image** style, which sets nothing: it gives the same look to all the site’s media. The **Images** part of the design catalog offers four looks: **Plain**, **Rounded**, **Shadowed** or **Frame** ([Adopt a design from the catalog](https://lovelyrender.com/documentation/adopt-catalog-design/)).

| Panel | Guide |
| --- | --- |
| **Colors** | [Color a block](https://lovelyrender.com/documentation/color-block/) |
| **Background images** | [Set a background](https://lovelyrender.com/documentation/set-background/) |
| **Typography** | [Format a text](https://lovelyrender.com/documentation/format-text/), for the caption. |
| **Size & Spacing**, **Borders**, **Effects**, **Transitions** | [Set size, borders and effects](https://lovelyrender.com/documentation/size-borders-effects/) |

A border, rounded corners or a shadow are applied to the image and clip it at its corners. The caption stays below, outside the frame.

## Animations tab

The **Animations** tab makes the media appear or move. The **Follows the scroll** mode sets a **Follows the scroll** animation there. [Animate a block](https://lovelyrender.com/documentation/animate-block/) describes the effects.

## On a phone

- The site creates several widths of each image: 480, 960 and 1,560 pixels, plus the original. The browser takes the smallest one that stays sharp on the visitor’s screen, without exceeding the **Maximum size**.
- The focal point is set per screen: the framing of a photo can keep a face on a phone and a landscape on a computer.
- On a phone, a video set to **On hover** loops while visible, with its pause button.
- A visitor who has asked to reduce animations sees the **Cover image** in place of videos that start on their own.

[Upload your photos and videos](https://lovelyrender.com/documentation/upload-photos-videos/) describes the formats the site prepares for each file.

## Accessibility

- An image that carries information has an **Alt text**. A decorative image is marked **Decorative image**: screen readers skip it.
- The caption is attached to the image for screen readers and search engines.
- The editor’s **Accessibility** panel flags an image without alt text. It flags a video without subtitles in **Manual** playback, a video without a pause button and a video without a player that carries tracks.

[Check the accessibility of your pages](https://lovelyrender.com/documentation/check-accessibility/) describes each finding.

## Limits

- The block accepts images and videos. For a PDF, use the [PDF document](https://lovelyrender.com/documentation/pdf-document-block/) block; for a video hosted by a provider, the [Embed](https://lovelyrender.com/documentation/embed-block/) block.
- No video starts when the page loads: automatic playback waits until the video is visible.
- An image pasted from another site arrives empty, with its alt text: the file stays on the original site.
- The player only reads tracks in the WebVTT format (`.vtt`): an `.srt` file is not read.

## See also

- [Upload your photos and videos](https://lovelyrender.com/documentation/upload-photos-videos/)
- [Find a photo on Pexels](https://lovelyrender.com/documentation/find-pexels-photo/)
- [Credit your photos and videos](https://lovelyrender.com/documentation/credit-photos-videos/)
- [Animate on scroll](https://lovelyrender.com/documentation/animate-on-scroll/)