The video element allows you to embed self-hosted videos directly into your page using the browser’s native video player. It supports formats like MP4 and lets you display responsive videos from multiple sources.
To add a video, select a file from the media library. You can add or replace the video by double-clicking the element, using the toolbar’s Edit option, or accessing the settings in the Advanced tab.
Advanced tab settings
The Advanced tab offers more control over how your video behaves and appears on the page. Here’s a breakdown of each option:
Video
Displays the currently selected video. After uploading or selecting a video, you can replace or remove it as needed.
Sources
Add multiple video sources to improve compatibility and responsiveness across browsers and devices.
- Select video: Choose a file using the same method as the video setting.
- Mime type: Specifies the format of the video (e.g.: video/mp4).
- Media query: Optionally define when this source should be used, such as max-width: 600px for mobile devices.
Playback options
- Autoplay: If enabled, the video will attempt to play automatically when the page loads. Most browsers require ‘Muted’ to be turned on for autoplaying to happen.
- Muted: Silences the video by default. Required for autoplay to work on most browsers.
- Loop: Replays the video continuously after it ends.
- Controls: Choose whether to display built-in video player controls like play/pause, volume, and fullscreen.
- Plays inline: Keeps the video inside the page layout on mobile devices instead of launching full screen.
Some browsers restrict autoplay unless the video is muted. Learn the details.
Width & Height
These parameters define the displayed size of your video element. You can manually set custom dimensions if you need a fixed width or height.
Preload
Controls how much of the video the browser fetches before playback.
- Auto: The browser may preload most or all of the video. Useful for short clips but can increase page weight.
- Metadata: Loads only info like duration and dimensions. Good balance for performance and a ready seek bar. (Recommended default.)
- None: Don’t load the video until the user interacts. Best for large files or bandwidth-sensitive pages.
Preload is a hint, browsers (especially on mobile) may override it based on network and battery conditions.
Poster
Select an image to show before the video starts playing. You can change or remove this preview image at any time.
Keep in mind that the poster image can increase the video’s size until playback begins, so to avoid layout shifts (CLS), it’s recommended to use an image that matches the video’s resolution.
FAQ
1. Add a Section, Div, or any container variant (Grid, Column, Container, etc.) where you want the background video to appear.
2. For the container element, set:
position: relative
z-index: 1
overflow: hidden
(This ensures the video stays behind the content, even if the container has a background color.)
3. Place the video inside the container.
4. For the video element, set:
position: absolute
z-index: -1
top: 0 right: 0 bottom: 0 left: 0
width: 100% height: 100%
5. In the Advanced tab of the video element, enable:
controls: off
loop: on
autoplay: on
muted: on (autoplay only works when the video is muted -> learn why)
The video will now cover the entire container, and you can place any other elements on top of it.