Prerequisites

The.com Basics HTML Attributes

The Video Element

Videos are a powerful visual to attract and engage users. The easiest way to add a video is to drag and drop a .mp4 or .webm directly onto a Video Element.

Attributes

Videos have attributes that you can use to control how the video plays on the browser. Clicking on certain attribute cells will toggle between an on/off or true/false value.

• Source - The file URL.

• Auto Play - Controls if the video will play automatically when the page is loaded. Set to "Manual" if you don't want it to start playing automatically.

• Loop - Controls if the video will loop when it has finished or only play once.

• Muted - Controls if the video is muted or unmuted.

• Player Controls - Shows or hides the video controls including the play, mute, fullscreen button, and the video timeline.

• Player Height - Sets the exact height of the video frame.

• Player Width - Sets the exact width of the video frame.

• Poster - Add an image to show over the video when it has not been started yet. This only matters if the Auto Play attribute is set to Manual.

After editing the attributes, you may need to refresh the site preview to see the autoplay take effect.

Sizing the video

You can size a video by setting its height and width attributes or by setting its height and width style properties.

The aspect ratio of the video will not change, so if the defined heights and widths do not match the video's intrinsic aspect ratio, the video will fill the space so that it is visible.

Tip: Use the object-fit property to make it so the video covers the full height and width specified without distorting the video, like in the example above.

Having a video as a background

In some designs, you may want to have a video playing in the background of a section with other content such as text above it. This is done frequently in hero sections.

The structure of your elements matters. You'll need one parent div which will contain the video and another div. This nested div will be where you can add the text content you want over the video.

The video above can be broken down into the following steps. Tip: press CMD/CTRL + K to bring up the command palette to search any style property!

1. Create a new Video Element nested inside a Div.

2. Upload a video file by dragging and dropping it on the element.

3. Edit its attributes. For a hero image, setting it to autoplay, loop, mute, and no player controls is probably a good idea.

4. Size the video. To make it fullscreen, set the Height to 100vh, Width to 100%, and then Object Fit to "cover".

5. Give the container Div and the content Div a position of "relative" and then give the video a position of "absolute". Set the video's Top property to "0". This makes other elements (the content div) ignore any of the video's size properties.

6. Set the Z Index for the video and the content Div. Make sure the content Div has a higher number than the video so it appears above the video.

7. Add to or edit the content Div.