SSV - Single Standard for Video

Definitions

The SSV standard defines requirements for the semantics, accessibility, and logic of video.

Structure and Semantics

A strict set of attributes is used:

1. autoplay and muted - required for autoplay, this is especially important in Safari, which blocks any autoplay with sound;
2. loop - ensures the video loops;
3. playsinline - critical for iOS to ensure the video plays on the page rather than in full-screen player mode.

Additional attributes, such as disablePictureInPicture and preload="auto", help control behavior more precisely and improve the user experience:

<video 
  autoplay
  muted
  loop
  playsinline
  disablePictureInPicture
  preload="auto"
  poster="preview.jpg"
  aria-hidden="true"
>
  <source src="bg.webm" type="video/webm">
  <source src="bg.mp4" type="video/mp4">
  <p>
    Your browser does not support video. 
    <a href="bg.mp4">Download video</a>
  </p>
</video>

If the video is the main content, control should be entirely in the user's hands, here you need the controls attribute to display the standard player interface and preload="metadata", which saves bandwidth by loading only information about the duration and the first frame, and sound can be enabled only after an explicit user action (for example, clicking the play button):

<video
  controls
  preload="metadata"
  poster="preview.jpg"
>
  <source src="content.webm" type="video/webm">
  <source src="content.mp4" type="video/mp4">
</video>

Most browser's policies prohibit automatic audio playback!

Not all video formats are supported equally well by browsers, so you should use a combination of WebM, a modern format with good compression, and MP4 as a fallback option.

The MOV (QuickTime) format should be avoided due to issues with codecs and playback outside the Apple ecosystem.

Accessibility

Videos must be accessible to all users, including those who use screen readers or have hearing impairments. To ensure this, captions, ARIA attributes, and text within <video> are used if the browser does not support video (which is extremely rare):

<track 
	kind="captions" 
	src="captions.vtt" 
	srclang="en" 
	label="Subtitles"
	default
>

Interactivity and Visual Feedback

To ensure users can interact with the video quickly and easily, it shouldn’t be too large no more than 5 MB provided the site isn’t a video hosting platform. You can also add a poster image using the poster="preview.jpg" attribute and make the video responsive:

.bg-video {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover; /* Crops the video while maintaining proportions */
	object-position: center;
}

Safari

Safari has a strict autoplay policy, for background videos, always use the muted + playsinline combination. If you need autoplay with sound (which is rarely justified), it can only be triggered programmatically in response to user interaction (a click or scroll).

Final examples

Background video

<video 
  class="bg-video"
  autoplay
  muted
  loop
  playsinline
  poster="sunset-preview.jpg"
  aria-hidden="true"
>
  <source src="header-bg.webm" type="video/webm">
  <source src="header-bg.mp4" type="video/mp4">
</video>

Interactive video with subtitles and description

<div class="tutorial">
  <video 
    controls
    preload="metadata"
    aria-label="Skateboard assembly instructions"
    aria-describedby="video-description"
  >
    <source src="tutorial.webm" type="video/webm">
    <source src="tutorial.mp4" type="video/mp4">
    <track label="Subtitles" kind="captions" srclang="en" src="tutorial-captions.vtt" default>
    <p>
      Your browser does not support the video element.
      <a href="tutorial.mp4">Download instructions</a>.
    </p>
  </video>
  <p class="sr-only" id="video-description">
    A five-minute video in which our master shows how to assemble a skateboard from ready-made components: trucks, wheels, and decks.
  </p>
</div>

Plugin

Next Video Plugin