<responsive-video-background /> Web Component

A Web Component that helps responsively using a video as the background of a content block. The video usage can be restricted to large viewports, with an image fallback on thinner ones.

The dimensions of the Web Component are determined by the content inside it. You can style the Web Component with CSS, but it is better to style the content itself, as there could be a layout shift with the component's styles because JavaScript has to run to really make it available.

Accessibility: If there's a video, it will play only if if the user didn't "notify the system that they prefer an interface that removes or replaces the types of motion-based animation that trigger discomfort for those with vestibular motion disorders" thanks to the CSS prefers-reduced-motion media query.

Examples

See on https://cleverage.github.io/responsive-video-background/

Installation

Use from a CDN

The quickest way to get started and try the Web Component is to load <responsive-video-background /> as a module script tag from a CDN:

<script type="module" src="https://unpkg.com/@cleverage/responsive-video-background@^1"></script>

Don't forget the type="module" attribute, this is own JavaScript modules are now loaded in HTML pages.

This is own it is used in this demo in CodePen that you can fork to play with it.

Better for performance: add a local version to your project

<responsive-video-background /> is also available on npm, so you can add it to your project with this shell command:

npm install @cleverage/responsive-video-background

You can then import it in your own project:

import '@cleverage/responsive-video-background';

Your build tools will then be able to optimize where, when and how to load it.

Usage

Syntax

The Web Component's configuration is done with attributes:

<style>
/* …inline CSS styles for the component, to prevent layout shifts */
</style>
<responsive-video-background
    class="…"
    webm="video.webm"
    mp4="video.mp4"
    poster="video-poster.jpg"
    fallback="not-responsive-image.jpg"
    srcset="image-320.jpg 320w, image-640.jpg 640w, image-1024.jpg 1024w"
    sizes="calc(100vh - 2rem)"
    breakpoint="48rem">
  Some content…
</responsive-video-background>

API

If the srcset option is set, these other ones are mandatory:

• webm and/or mp4
• fallback
• sizes

If the breakpoint option is set, these other ones are mandatory:

• webm and/or mp4
• fallback
• srcset
• sizes

FAQ