Skip to main content

Video

The Video element plays a film from your media library, poster first. Almost everything else on this page follows from that poster: with one, a visitor downloads a single image and fetches the film only when they press play.

Choosing the film​

Set a Video source with Browse media. A video from your media library arrives with a poster frame, its running time and its dimensions already filled in — you only need Poster image to override the frame the library picked.

Video uploads are paused

New video files cannot be uploaded to the media library for now. The Video element can still use any video that is already in your library, or a video hosted on Wistia, YouTube or Vimeo.

tip

Picking a video from the media library copies its dimensions onto the element, which reserves the right-shaped box before anything loads and stops the rest of the page shifting when it does. It fills in the duration too, so the only SEO fields left to write are the title, the description and the date.

What a visitor downloads before pressing play​

The poster is what makes the element cheap. With one, Preload defaults to fetching nothing — a visitor downloads the poster and not one byte of the film until they press play. Without a poster the element falls back to fetching the video's length and dimensions, because a video with neither a poster nor metadata paints a black rectangle. If you want the old behavior on a postered video, set Preload to Length and dimensions only.

Captions​

Captions file takes a WebVTT (.vtt) file — pick it with Browse media. Fill in Captions label and Captions language so the player can name the track.

Opening in a lightbox​

Turn on Open in a lightbox and the poster becomes a play button that opens the film full size over the page, with a close button and Esc to dismiss. It needs a poster; without one the player stays in the page as usual.

The lightbox has its own player controls: play, a seek bar with the time, mute and volume, captions when the video has a captions file, and full screen. Each one works from the keyboard. Space or K plays and pauses, the left and right arrows skip five seconds, M mutes, F goes full screen, and Esc closes the lightbox from any control, leaving full screen first if it is on.

The lightbox's backdrop, size, corners, close button and transition are set with the same Lightbox settings every element has — see How a lightbox looks and closes. Left alone, the film's lightbox is wide and black, as it always was.

A video hosted on Wistia, YouTube or Vimeo​

Paste the video's link into Video source. Each host's usual links work:

  • Wistia: the address of the video's page in your Wistia account, or its embed link.
  • YouTube: the video's page, a Short, a live video, its embed link, or the youtu.be link from Share.
  • Vimeo: the video's page, the same video in a channel, group or showcase, or its embed link. An unlisted Vimeo video does not play this way: its link carries a private part the player needs, so make the video public on Vimeo first.

A link to a channel, a playlist or a search names no single video, so the element treats it as an ordinary link and plays nothing.

Then pick a Poster image from your media library. The poster becomes a play button, and the host's player loads only when a visitor presses it, so someone who never presses play never contacts the host, unless you turn on Load the player with the page (below). The player opens in the lightbox when Open in a lightbox is on, and in place of the poster when it is off. Without a poster the element asks for one instead of loading the player, except where a YouTube video shows YouTube's own thumbnail.

Each host's player brings its own controls. In the lightbox, Esc closes it until you move into the player; from inside the player, Shift+Tab reaches the close button. Type the running time into Duration (seconds), because a hosted video's link does not carry it.

How each host's player treats your visitors:

  • Wistia records a viewing only for a visitor whose analytics consent your site has on record, and plays with its tracking off for everyone else.
  • YouTube always plays in its privacy-enhanced player (youtube-nocookie.com), for every visitor.
  • Vimeo always plays with its do-not-track option on, for every visitor.

Turn on Load the player with the page for a page whose main content is this one video, such as the entry page of a video collection. Search engines list a video only from a page like that, and they only find a player that is on the page when it loads. With the switch on, the host's player replaces the poster as soon as the page loads, without starting the video, for each visitor whose analytics consent your site has on record. Everyone else still gets the poster to press. The player stays in the page even when Open in a lightbox is on. Keep the switch off on your home page, and on any page where the video is secondary.

A host's player keeps data in the visitor's browser from the moment it loads, which is why the switch waits for consent. In the geo-conditional consent mode, a visitor outside the EU, the UK and the other prior-consent regions has that consent on record from their first visit. Google's crawler normally visits from the US, so it is treated the same way. In Opt-in everywhere mode, search engines get the poster. A site without Google Analytics or Google Tag Manager, or with the consent banner turned off, records no consent, so every visitor there gets the poster.

A YouTube video without a poster​

YouTube thumbnails as posters are rolling out, so your workspace may not have them yet. Once it does, a YouTube video with no Poster image shows YouTube's own thumbnail of the video as its poster on your published site, and pressing it plays the video as any poster does. A YouTube video that Bring my site brings in without a poster of its own is placed the same way. In the Besigner the element still asks for a poster image.

Each visitor's browser loads that thumbnail from YouTube's image server (i.ytimg.com) as the page loads, so YouTube receives the visitor's IP address and browser details even if they never press play. The page's address is not sent with it. To keep a page from contacting YouTube until someone presses play, pick your own Poster image. Vimeo and Wistia videos always need a poster of your own.

Starting the film from a button​

A button elsewhere on the page can start the film: give the button the interaction When clicked → Play a video and pick this Video. It does what pressing the poster does.

The fields a search result reads​

Video title and Publication date are what let search engines list the video in results. They are not decoration: a video is only eligible for a video result when both are filled in, alongside the poster. Video description is recommended rather than required, so a video without one can still be listed; write one anyway, different for every video. The title is also the name a screen reader announces for the player, and the tooltip on hover. None of the three is ever displayed as text on the page.

To give each video a page of its own, build a video collection: its entry template fills these fields from each entry, with Publication date set to {{entry.publishedAt}} and Duration (seconds) set to {{entry.coverVideoDuration}}, the entry's video length.