Responsive Video Poster

Installation

$ npm install responsive-video-poster --save-dev

Usage

Import or add the JS into your project, add the elements to your HTML and initialize the plugin if needed.

JavaScript

import { ResponsiveVideoPoster, ResponsiveVideoPosterAuto } from 'responsive-video-poster.js';

OR

<script src="responsive-video-poster.js" type="module"></script>

Web Component

import { ResponsiveVideoPoster } from 'responsive-video-poster-wc.js';

OR

<script src="responsive-video-poster-wc.js" type="module"></script>

Initialize JS

// Initialize a single element
const responsiveVideoPosterDefault = ResponsiveVideoPoster({ 
  selector: '#responsive-video-poster--default'
});

// Initialize all elements with default options, these can be overridden by reinitializing or by data attributes on the element.
ResponsiveVideoPosterAuto();

Markup

JS

<div class="responsive-video-poster">
        
    <button class="rvp-placeholder" aria-label="Play video">
      <span class="rvp-button" aria-hidden="true"><svg class="rvp-button-icon"> ... </svg></span>
  
      <img srcset="images/720.jpg 720w, images/1080.jpg 1080w" src="images/1080.jpg" class="rvp-poster" width="1080" height="608" loading="lazy">
    </button>
  
    <video src="videos/video.mp4" class="rvp-video" preload="none" width="1080" height="608"></video>
  
  </div>

Web Component

<responsive-video-poster>
  ...
</responsive-video-poster>

Options

The options can be set via initialization in the JS or by attributes on the element, which will be given the highest priority. The property is changed from camel case to dash case with with the prefix 'rvp' added for the JS version e.g. "activeClass" to "rvp-active-class".

<div class="responsive-video-poster" data-rvp-active-class="is-open">

<responsive-video-poster active-class="is-open">

API

Performance optimizations

Responsive image techniques(srcset, sizes, source, etc) are used to load the most appropriate image. Native lazy loading is used on the responsive poster image to reduce initial page load. The plugin should also work normally with lazy load plugins.

The video element includes preload="metadata" or preload="none" so the video is not loaded until the user interacts with it. This will reduce the initial page load but may create lag in playback for some users. This can be removed if not needed.

The embedded video includes srcdoc="" so the video and third-party scripts are not loaded until the user interacts with it. The 'preConnections' option can be used to pass domains to start pre-connect connections for loading an embedded video. this happens when the user hovers/taps on the video using the pointerover event. For example Youtube could use ['https://www.youtube.com', 'https://www.google.com'].

Events

A 'playVideo' event is started once a user clicks the video placeholder. The event is ended once the placeholder has become inactive and the video starts playing.

document.querySelector('#responsive-video-poster--default').addEventListener('playVideo', (event) => { 
  console.log(`Action: ${event.detail.action}`);
});

You can also attach this to the document.

document.addEventListener('playVideo', (event) => { 
  console.log(`Target: ${event.target.matches('#responsive-video-poster--default')}`, `Action: ${event.detail.action}`);
});

Compatibility

Supports all modern browsers at the time of release.

Demo site

Clone the repo from Github and run the commands below.

$ npm install
$ npm run dev

References

Lazy loading of an embedded video by Arthur Corenzan. Lazy load third-party resources with facades. HTML Web Components by Jim Nielsen Lite YouTube Embed by Paul Irish.
Covverr videos of Lago di braies and Lofoten rocks. Youtube video of Tustan Karpaty mountains.