bgVideo.js is a tiny JavaScript library that adds a fullscreen video background to your body or a specific container by using Html5 video element.
How to use it:
Place the bgVideo.js anywhere on your web page.
<script src="dist/bgvideo.min.js"></script>
Add the data-fullvideo attribute containing your background video source to the body tag.
<body data-fullvideo="path/to/demo.mp4">
Advanced usage:
// use like this, nothing else needed
bgVideo({
sources: ['bg.mp4', 'bg.webm', 'bg.ogg'],
img: 'bg.jpg'
});
// calling with no arguments returns the <video> tag
// so you can do things like
bgVideo().pause();
bgVideo().play();See Also:
Lazy Loading Video Backgrounds with IntersectionObserver
Lightweight Background Video Library – vidim
Responsive Video Background Component With Image Fallback
Mobile-friendly Background Video Solution – Vidage.js
Video Background With Fallback And Overlay – vidbg.js
Fullscreen Background Video Using YouTube Player API
Dynamic Background Video Slideshow In JavaScript
Creating A Fullscreen Video Background With Pure JS – background-video