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.

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.

A video hosted on Wistia​

Paste a Wistia media link into Video source: the address of the video's page in your Wistia account, or its embed link. Then pick a Poster image from your media library. The poster becomes a play button, and Wistia's player loads only when a visitor presses it, so someone who never presses play never contacts Wistia, 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.

Wistia'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. 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. Type the running time into Duration (seconds), because a Wistia link does not carry it.

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, Wistia'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, with Wistia's tracking off. 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.

Wistia'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.

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}}.