BHDicaire

Video embed

Content

The video embed starts as a local thumbnail with a play button. It creates the remote iframe only after the reader activates that button, keeping the initial page free of player requests and scripts.

Example#

A deferred YouTube player using a local poster image

When to use#

  • Use an embed when the video is central to the page, not a supporting reference
  • Prefer an external link when a title and destination are enough
  • Do not publish an embed without captions; link to a captioned source instead

Implementation#

{{ partial "video-embed.html" (dict
  "title" "YouTube Developers Live: Embedded Web Player Customization"
  "embedURL" "https://www.youtube-nocookie.com/embed/M7lc1UVf-VE?autoplay=1&rel=0"
  "watchURL" "https://www.youtube.com/watch?v=M7lc1UVf-VE"
  "thumbnail" "/images/home/ben-speaking-les-affaires-2020.jpg"
  "thumbnailAlt" "Benoît H. Dicaire speaking on stage"
  "caption" "A deferred YouTube player using a local poster image"
) }}

The partial validates both remote URLs as HTTPS and renders no iframe initially. On activation, scoped JavaScript replaces the button with a titled iframe, enables the player features, and moves focus into it. Markdown pages use the video-embed shortcode, which validates the YouTube ID and constructs the URLs.

Options#

OptionPurpose
titleRequired video title used for the play button and iframe
embedURLRequired HTTPS player URL loaded only after activation
watchURLRequired HTTPS fallback URL shown when JavaScript is unavailable
thumbnailRequired local poster image path
thumbnailAltRequired text alternative for the poster image
captionOptional visible figure caption

Interface manifest

Kind
Component
Category
Content
Status
Implemented
Implementation
Partial:layouts/partials/video-embed.htmlShortcode:layouts/shortcodes/video-embed.htmlCSS:assets/css/site.cssJavaScript:assets/js/site.jsi18n:videoEmbedPlayvideoEmbedWatch
Related interfaces
Video embed

Accessibility#

  • The poster is inside a native button, so Tab reaches it and Enter or Space activates it
  • The button’s accessible name and the created iframe’s title both identify the video
  • Focus moves into the iframe after activation; the local poster leaves the document when the button is replaced
  • Captions are a publishing requirement that the component cannot verify; confirm them at the video source before embedding

Privacy and performance#

  • The initial component loads only the local poster image
  • The remote player is requested after an explicit activation
  • The YouTube shortcode uses the youtube-nocookie.com embed host