SSV - Single Standard for Video

The SSV standard defines requirements for semantics, background and interactive video settings, attributes for Safari, accessibility rules, and video weight.

Background video

The background video should not interfere with the viewing of the main content.

The key objective is to ensure that it plays smoothly, automatically, and silently on all devices.

To achieve this, 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.

Example of background video:

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

Interactive video

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

Most browsers’ policies prohibit automatic audio playback!

Audio can only be enabled after an explicit user action (such as 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>

Format selection

Not all video formats are supported equally well by browsers. The strategy is to use two main formats:

1. WebM - a modern format with good compression. List this first for browsers that support it (Chrome, Firefox).

2. MP4 (H.264) - a universal “fallback” option with nearly 100% support.

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

Don’t forget about accessibility

The video must be accessible to all users, including those who use screen readers or have hearing impairments.

1. Subtitles - a text track <track> is required. This not only helps the hearing impaired but is also useful when watching without sound.

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

2. Description for screen readers - Use ARIA attributes (aria-label, aria-describedby) or a hidden text block to describe the content of the video for visually impaired users.

3. Fallback content - The text inside the <video> tag will be displayed if the browser does not support the element at all.

Best Practices and Optimization

1. Optimize the size - Background videos should not exceed 5 MB. Use compression, reduce the duration and frame rate, but don’t overdo it.

2. Use a poster image - the poster="preview.jpg" attribute sets a fallback image that is displayed while the video loads, improving user experience and page rendering speed.

3. Make the video responsive - using CSS, you can make the video cover the area as a background.

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

Safari and mobile browser features

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

Sometimes standard controls may not display correctly in Safari. This issue can often be resolved using CSS:

video::-webkit-media-controls {
  display: flex !important;
}

Using !important is only justified in the most extreme cases!

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 id="video-description" hidden>
    A five-minute video in which our master shows how to assemble a skateboard from ready-made components: trucks, wheels, and decks.
  </p>
</div>

The article will be supplemented