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
- In the editor, open the inserter and choose Media, or search for
image,photo,videoorgif. Add a block details the ways to insert a block. - 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.
- If you have no photo of your own, click Search Pexels. Find a photo on Pexels describes the search and the import.
- 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 explains how to show the media’s author there.
A gallery is built with a Container 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 |
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 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.
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. |
| 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 |
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.
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.
- In the Subtitles and text tracks section, click Add a text track. The media library opens on the
.vttfiles. - Choose or upload the file. A card with the file’s name appears in the section.
- 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. |
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.
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 details them. A link to a file in the media library always opens in an overlay: a thumbnail enlarges without leaving the page.
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).
| Panel | Guide |
|---|---|
| Colors | Color a block |
| Background images | Set a background |
| Typography | Format a text, for the caption. |
| Size & Spacing, Borders, Effects, Transitions | Set size, borders and 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 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 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 describes each finding.
Limits
- The block accepts images and videos. For a PDF, use the PDF document block; for a video hosted by a provider, the Embed 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.srtfile is not read.