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

Preview:

Description:

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 {
  position:absolute;
  object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: -999;
  top: 0;
  left: 0;
}

Changelog:

08/15/2018

• Make background image on mobile cover entire container