There are three ways you can add video to a page: via the Video Element, by adding the video to the background of another element, or by using the embed element.
The Video Element is designed to let the user have control over the playback of the video, and is ideal for longer videos. Background video is most useful for adding short, looping videos to a site that don't have player controls. Embedding a video (or video stream) can be helpful if the video or stream is not hosted on either YouTube or Vimeo, or uploaded into TIME Sites.
The Video Element
Adding a Video Element to the page will display the video within a user-controlled video player.
This is also a good option to use when…
You want to ensure that the video is always uncropped and maintains its aspect ratio.
You want your video to have sound.
Background Videos
Adding a video as a background will place it in the background of another element (such as a container, grid, or text element.)
To do this, just drag the video from your media library onto the element, or use the Video Control Panel.
You should use background videos when...
You want to be able to crop the video, or ensure that it always extends to the full width of its container or the browser.
You want to place other design elements (text, etc.) over top of the video.
You want to be able to autoplay without visible player controls (pause, play etc.)
You want to use a short video as a looping gif
Embed videos
If your video (or video stream) is not hosted on YouTube or Vimeo, you can get an embed code and paste it into the embed element for it to work. Embed elements will crop into the video, so make sure to resize the element so that the whole video shows. You can also give your embed element a responsive height (in vw, which stands for view-width, the width of your screen) based on the width of the screen. So no matter if the screen gets larger or smaller, the height will respond accordingly.
Video Sources
There are two main ways to add video to TIME Sites: by uploading it directly, or by streaming it from YouTube or Vimeo.
If your video is very long or very large, you should upload it to YouTube or Vimeo. These services are highly optimized for video streaming, or you can compress it.
If the video is smaller (under 1GB), you can upload it to your site's Media Library in TIME Sites.
Auto-Playing Videos
While “auto-play” is an option for your videos, there are restrictions on when videos will actually auto-play on your site.
Browsers will only auto-play videos if the video is muted. Many browsers also prevent auto-playing even with the video muted.
Mobile devices may disable the auto-playing of videos. This is to prevent unsolicited downloads over cellular networks at the user’s expense. If you're using a video element and it's set to autoplay, mobile users will still be able to tap on the video if they want to play it.
We recommend a video size under 5MB if you're going to try and add an auto-playing background video to your site, so that it doesn't take the site too long to load! Very large videos will eat a lot of bandwidth for your visitors, and slow down the page load speed significantly while the entire video loads. For these reasons, it's considered bad practice to play them without the user's consent.
Known Issues
Depending on which video service you decide to use, you may notice some idiosyncrasies while working with in the TIME Sites studio. In some cases, the autoplay, mute, and loop setting may appear as if they are not working.
However, these features should work fine on the published site. We recommend always confirming that the video is behaving the way you want it to by checking on the published website.
More Info
Read more about using the Video Element here.
Read more about using the Video Control Panel, which allows you to control the settings and behavior of a Video Element or a background video, here.