📜 ⬆️ ⬇️

BigVideo.js: full screen background video



The jQuery BigVideo.js plugin adds video to the page as a background image via the HTML5 Fullscreen API. The video is automatically stretched to any screen size. To work, you must first download the jQuery, jQuery UI and jQuery libraries loaded libraries. Run:

$(function() { var BV = new $.BigVideo(); BV.init(); BV.show('http://video-js.zencoder.com/oceans-clip.mp4'); }); 

Vimeo Pro is convenient to use as a hosting for your videos, it gives a direct link to the mp4 file and ships content at a speed of more than 10 Mbps.

You can run a list of multiple videos in an endless loop, as in this example . Of course, you need to add a button so that the user can disable video playback.
')
 $(function() { var BV = new $.BigVideo(); BV.init(); BV.show(['vid1.mp4','vid2.mp4','vid3.mp4'],{ambient:true}); }); 

Since on mobile devices, automatic video playback is prohibited, using this code, you can recognize them and replace the background video with a static background image:

 var BV = new $.BigVideo(); BV.init(); if (Modernizr.touch) { BV.show('video-poster.jpg'); } else { BV.show('video.mp4',{ambient:true}); } 

There is support for playlists with a choice in the menu which video to launch.

Collections of free videos , suitable for the background.

Source: https://habr.com/ru/post/151123/


All Articles