Creating A Fullscreen Video Background With Pure JS – background-video

Category: Javascript | August 15, 2018
Views Total:5,026 views
Official Page:Go to website
Last Update:August 15, 2018


Creating A Fullscreen Video Background With Pure JS – background-video


background-video is a pure JavaScript/CSS solution to create a video background with playlist support for your webpage.

How to use it:

Put the background-video JavaScript library at the bottom of your webpage.

<script src="background-video.js"></script>

Create a new BackgroundVideo object and set the video sources you want to use.

new BackgroundVideo({
     * container [optional]: id of the element, where to add video background. 
     * If ommited video background is added to the BODY element.
     * Example:
     * container: "myId",
     * video: list of video files
     * Note: If you have one video in different formats (mp4, webm, ogv, etc)
     * you can add them all to ensure browser compatibility.
     * Use 'formats' option to list all additional formats.
    video: [
            file: "1.mp4"
            file: "v2.ogv",
            formats: [ "mp4", "webm" ]
            file: "3.mp4"
     * To save traffic mobile users see a still image instead of video.
    mobileImg: "poster.jpg"

The required CSS styles to make the video background fullscreen and absolute positioned.

.flexible {
  object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: -999;
  top: 0;
  left: 0;



  • Make background image on mobile cover entire container

You Might Be Interested In:

Leave a Reply