{video} · PAD tags

Syntax

{video 'https://www.youtube.com/watch?v=id', title='text'}
{video 'https://vimeo.com/id#t=1m30s', title='text', poster='photos/still.jpg', ratio='16:9'}
{video 'clips/sunrise.webm', title='text', poster='photos/sunrise.jpg'}

Parameters

address: A YouTube address (watch?v=, youtu.be/, /shorts/, /embed/, /live/, youtube-nocookie.com), a Vimeo address (vimeo.com/<id>, player.vimeo.com/video/<id>) or a .mp4, .webm, .ogv or .mov file of www/<application>/.

Options

title: Required: the play button's text, the iframe's title, the video element's name.
poster: A picture of www/<application>/ (versioned as {asset}) in place of the site's thumbnail.
at: The moment to start at - 90, 1m30s or 1:30; a t=, start= or #t= in the address says it too.
ratio: The proportion, default 16:9; a short is 9:16 and kept to a phone's width.

Description

{video} embeds a YouTube or Vimeo video without letting the video site run anything before the visitor asks for it (tags/_lib/video.php). The page shows a poster with a play button; only a click on the button puts the player's iframe in the poster's place and moves the focus into it.

The poster of a YouTube video is its thumbnail on i.ytimg.com - an image, no script and no cookie - and the player comes from youtube-nocookie.com with autoplay=1&rel=0. A Vimeo video gets a quiet drawn poster unless poster names a picture, and its player is asked with dnt=1. The small script that swaps poster and player is written once per request, with the CSP nonce when $padCsp asks for one. Without script the button is hidden and a <noscript> link to the video on its own site stands in its place.

A file of www/<application>/ - .mp4, .webm, .ogv or .mov - is written as <video controls preload="none" playsinline> with its poster: nothing is loaded before play. A start time is written in the address - t=, start= or #t= - or as the at option, as 90, 1m30s or 1:30; not as start, the handling option that skips occurrences. ratio sets the proportion of the box. The colours are --pad-video-* custom properties on .pad-video.

title is required - it is what a screen reader says for the button and the player. A missing title and an address that is no known video are errors under the strict check.

Examples

YouTube without tracking

The thumbnail and a play button - the player comes from youtube-nocookie.com only after the click.

Templateexamples/video/1-youtube.pad

<div style="max-width:480px">
  {video 'https://www.youtube.com/watch?v=aqz-KE-bpKQ', title='Big Buck Bunny - Blender Foundation'}
</div>

Resultopen alone

Vimeo from a start time

A Vimeo address with a #t= start time and a drawn poster - the player is asked with dnt=1.

Templateexamples/video/2-vimeo.pad

<div style="max-width:480px">
  {video 'https://vimeo.com/76979871#t=1m30s', title='The new Vimeo player'}
</div>

Resultopen alone

A clip of your own

A WebM file of www/<app>/ as a video element - its poster shown, nothing loaded before play.

Templateexamples/video/3-file.src

{video 'clips/sunrise.webm', title='A sun crossing the sky', poster='photos/sunrise.jpg'}