<responsive-video-background />
Web Component
![Built by Clever Age](https://img.shields.io/badge/Build%20by-Clever%20Age-223445?labelColor=98700e)
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.
Examples
See on https://cleverage.github.io/responsive-video-background/
Usage
Syntax
The Web Component's configuration is done with attributes:
<style>
</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
Question | Answer |
---|
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. |