The Video Element

Add videos to your page by displaying them within a user-controlled video player.

Alex Piepenbrink avatar
Written by Alex Piepenbrink
Updated over a week ago

The Video Element will allow you to add a video to your page and display it within a user-controlled video player.

Note that this is not the only way to display video on your site—you can also add a background video to another element (such as a container, grid, or text box) or you can embed the video in an embed element. If you aren't sure which method to use, refer to this article that can help you decide.

Adding a Video Element to the Page

Click and drag the video element icon from the left toolbar, and drag it onto the page:

The video element may be placed as a root element on the page or placed within another element (container and grid elements only). It will automatically take up 100% of the width of its parent element.

When the video element is first placed on the page, it will be empty: the next step will be to add a video to it.

Adding a Video into a Video Element 

To add a video to a Video Element, click the play button icon inside the video element. This will open the video uploader panel:

You can add video from YouTube or Vimeo by pasting an external URL, or you may upload your own video. If you upload your own video, then you can just drag and drop it from either the Media Library or directly from your desktop into the video element.

Video Controls

The Video Control Panel, accessible from your right toolbar, will allow you to specify some settings for the video element:

  • Add/Replace Video: Re-opens the video uploader to select a different video.

  • Video Poster Image: By default, when you add a video the thumbnail image will be provided by the third party provider (Vimeo or YouTube), or as a freeze frame 3 frames into the clip. If you've uploaded the video into TIME Sites, you can change the video's poster image here by either adding a new image from your media library or your desktop.

  • Loop Video: Sets the video to loop.

  • Mute audio: Mutes the sound of the video.

  • Auto Play: Sets a video to automatically play. For uploaded videos, Mute Audio will need to be checked for Auto Play to work, since most browsers prevent video with audio from auto playing.

Resizing Videos in a Video Element

The video will proportionally scale the size of the Video Element, and maintain its aspect ratio. If you want to crop the video, or display it at full browser-width, you may want to consider using a background video instead.

Deleting an Video Element 

To delete an Video Element, select any video element that has been placed on the page by clicking on it (or accessing the video element from the breadcrumbs bar or page structure panel) and select delete on your keyboard.

Did this answer your question?