Video

A YouTube or Vimeo embed loads 0.5-1 MB of scripts before anyone presses play. varz-video.js shows a poster link instead and loads the player only on click. Nothing is requested from YouTube or Vimeo until then - without JavaScript the link opens the video page.

Click to play

Big Buck Bunny · YouTube

The New Vimeo Player · Vimeo

Self-hosted video

A link to a video file (.mp4, .webm, .ogv, .mov) plays in the browser's own player - nothing from a third party. The link's image becomes the video poster, so there is no black flash while the file loads. data-vz-captions adds a WebVTT captions track, shown by default.

Videos in a slider

A video stops when its slide leaves (a file pauses, YouTube / Vimeo return to the poster). The first slide has data-vz-autoplay: it starts muted when the slide comes in. The slider's own autoplay waits while a video plays.

Photos and videos in the lightbox

A data-varz-lightbox link to a video page or file plays the video in the viewer. Moving to the next item or closing stops it.

Markup

<a href="https://www.youtube.com/watch?v=ID" data-varz-video
   style="--pos:relative;--d:block;--ar:16/9;">
  <img src="poster.jpg" alt="Video: How it works" style="--w:100%;--h:100%;--obf:cover;">
  <span aria-hidden="true">▶</span>
</a>
<script src="varz.js" defer></script>
<script src="varz-video.js" defer></script>

Attribute	What it does
`data-varz-video`	On click the link is replaced by the player (same style attribute), which autoplays and gets the focus.
`data-vz-title`	Player title for screen readers; without it the poster's alt text is used.
`data-vz-autoplay`	Starts the video muted when its container is activated - a slide coming into view, a tab or accordion panel opening (varz.js), or a wrapper with `data-vz-event="inview"`. A playing video always stops when its container is deactivated.
`data-vz-captions`	Video files: a WebVTT captions file (`.vtt`), shown by default. `data-vz-captions-lang` - its language (default: the page language), `data-vz-captions-label` - its name in the player menu (default "Captions").
`href`	YouTube (watch, youtu.be, shorts, embed links; `?t=` start time - played from youtube-nocookie.com), Vimeo (also unlisted links), or a video file: .mp4, .webm, .ogv, .mov.

Ctrl / Cmd-click opens the video page as a normal link. The poster is your own image - a YouTube thumbnail URL would contact Google before the click. Texts: varz.video.i18n. varz.media.parse( url ) is shared with varz-lightbox.js.