<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.
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.
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
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:
Your build tools will then be able to optimize where, when and how to load it.
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>
||URL to the WebM version of the video||https://cleverage.github.io/responsive-video-background/demo/Big_Buck_Bunny_720_10s_1MB.webm|
||URL to the MP4 version of the video||https://cleverage.github.io/responsive-video-background/Big_Buck_Bunny_720_10s_1MB.mp4|
||URL to the video's poster image. This should be the first frame of the video, and an highly optimized progressive JPEG||https://cleverage.github.io/responsive-video-background/Big_Buck_Bunny_720.jpg|
||URL to the fallback image, for the
||Value of the
||value of the
||Viewport width breakpoint, if there should be an image on thin viewports and a video on larger viewports||
srcset option is set, these other ones are mandatory:
breakpoint option is set, these other ones are mandatory:
|Why isn't the image switching to a video when the viewport becomes larger?||This is not a bug. The idea is to prevent a strong visual change when the user changes the viewport, either by resizing the browser, or rotating the device.|