Use the Media element to show a picture, video or animation, and background settings to put one behind a section.
In the page builder, open the Content category and add Media. Then choose its Type.
Image
A picture from your media library.
Video (MP4)
A video file from your media library.
YouTube or Vimeo
Type the video's URL or ID.
Lottie Animation or Rive Animation
An animation file from your media library.
Always fill in Alt Text. Screen readers announce it, and it shows if the media cannot load.
Alignment
Left, Center or Right.
Width and Height
Any CSS size, such as auto, 100% or 400px.
Object Fit
How the media fills its box: Cover, Contain, Fill, None or Scale Down.
Click Action
None, or Open Link with a Destination URL.
Playback
Autoplay, Loop, Muted, Controls and Volume for videos, and Speed for animations.
Loading
A placeholder while the media loads, and the text shown if it fails.
Most browsers only autoplay videos that are muted. Turn on Muted together with Autoplay.
Styling & Effects adds a shadow, filters such as opacity, brightness, contrast, saturation, blur and sepia, and hover effects that scale the media or change its opacity.
Border settings are in their own section of the element's settings.
Sections, rows and columns have a Background setting. Set Background Type to Image or Video and pick the file from your media library.
Set a separate position for desktop, tablet and mobile.
Add an overlay color with its opacity for light mode and for dark mode, so text on top stays readable.
Other types are Transparent, Color and Crazy, an animated effect.
