A video element gives you full HTML5 video control: a primary source plus alternative codec formats for browser fallback, a poster image, fit, and the playback toggles (controls, autoplay, loop, muted, playsinline, preload).
Where: Right sidebar → Media (video selected) — Select a video element
Key ideas
- Sources and fallback formats: Set a primary source and optional alternate WebM/MP4/MOV sources; browsers choose the first source they can decode.
- Fit and Position control the box: Choose Cover, Contain, Fill, None, or Scale Down, then position the visible source inside the video element box.
- Playback options and timeline are separate: Controls, Autoplay, Loop, Muted, Inline, and Preload manage HTML video behavior; Timeline playback controls appear only when a single selected video is bound to a timeline media layer.
Steps
- Select the video element and open the right sidebar → Media → Video.
- Choose or replace the primary Source and add alternate formats if browser compatibility requires them.
- Choose a Poster image, then use Fit (Cover/Contain/Fill/None/Scale Down) and Position to frame the source in its box.
- Set Controls, Autoplay, Loop, and Muted deliberately. Autoplay generally requires Muted in modern browsers.
- Open optional fields for Inline and Preload (None/Metadata/Auto) when the project needs those HTML behaviors.
- If a single selected video has a timeline media-layer binding, use the separate Timeline playback controls below the source settings.
- Preview the page and verify the actual browser playback behavior and mobile framing.
Sidebar options
- Source: primary video URL/asset. Poster: image displayed before playback.
- Fit: Cover, Contain, Fill, None, or Scale Down. Position sets the focal point in the frame.
- Playback toggles: Controls, Autoplay, Loop, Muted; optional Inline toggle and Preload of None, Metadata, or Auto.
- Alternate sources can hold WebM/MP4/MOV variants; the browser picks a decodable source.
- Timeline playback panel appears only for one selected video bound to a timeline layer and controls timeline-linked playback separately from HTML attributes.