Example of how to easily implement full-screen video background using HTML5

Want to play a video full screen on your homepage? This video is used as the background of the web page and does not affect the normal browsing of the web content. Then let me tell you that there is a Javascript library that suits your needs, it is Bideo.js.

Automatic adjustment: Bideo.js can automatically adjust the video size according to the size of the current browser window. When the browser window is adjusted, it will adapt to the window size. Both the mobile and PC sides can automatically adjust so that the video can be used as the background and displayed in full screen. .

Overlay: After the video is used as the background of the web page, we can place any HTML content on top of the video.

Video cover: When the page is opened, the video may take a few seconds to load. Then we can set a picture as the cover of the video and wait until it is loaded before playing.

Add the following HTML code to the body of your page. Obviously, the <video> tag is used to load videos, the attribute loop refers to looping the video, and muted refers to mute mode, that is, the volume is 0. #video_cover is the default video cover. #overlay is the mask layer on which all other page content is displayed.

 <div id=container> <video id=background_video loop muted></video> <div id=video_cover></div> <div id=overlay></div> <div id=video_controls> <span id=play> <img src=play.png> </span> <span id=pause> <img src=pause.png> </span> </div> <section id=main_content> <div id=head> <h1>HTML5 easily implements full-screen video background - Bideo.js</h1> <p class=sub_head>A Javscript library that can easily add full-screen background video to the page</p> <p class=info>(Wait a moment, the video will take a while to load.)</p> </div> </section></div>

We also added #video_controls, which is used to control video playback and pause, suitable for mobile phones. Finally, you can add any HTML content you want to display in the next section.

CSS is also critical. The most important things to pay attention to are the settings of #container and #background_video. The following css code can be taken directly without explanation:

 * { margin: 0; padding: 0;}html, body { width: 100%; height: 100%; overflow: hidden;}#container { overflow: hidden; position: absolute; top: 0; left: 0; right : 0; bottom: 0; height: 100%;}#background_video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover; height: 100%; width: 100%;}#video_cover { position: absolute; width: 100%; height: 100%; background: url('video_cover.jpeg') no -repeat; background-size: cover; background-position: center;}#overlay { position: absolute; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0,0,0,0.5);}

First load the Bideo library:

 <script src=bideo.js></script>

Then instantiate the bido: new Bideo(), then initialize the loading directly and set the following options:

 (function () { var bv = new Bideo(); bv.init({ // Video element videoEl: document.querySelector('#background_video'), // Container element container: document.querySelector('body'), / / Adaptive adjustment resize: true, // autoplay: false, isMobile: window.matchMedia('(max-width: 768px)').matches, playButton: document.querySelector('#play'), pauseButton: document.querySelector('#pause'), // Load the video source and replace your own video source file according to the actual business src: [ { src: 'http://ak4.picdn.net/shutterstock/videos/4170274/preview/stock-footage-beautiful-girl-lying-on-the-meadow-and-dreaming-enjoy-nature-close-up-slow-motion -footage.mp4', type: 'video/mp4' }, { src: 'night.webm', type: 'video/webm;codecs=vp8, vorbis' } ], // Once the video is loaded, the video cover will be hidden onLoad: function () { document.querySelector('#video_cover').style.display = 'none'; } } );}());

Just like this, a high-looking background video page is completed. Welcome to view the online demo DEMO and download the source code. For more information about Bideo.js, please view the github project address: https://github.com/rishabhp/bideo.js.

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.