Lightweight Responsive Video Background Plugin - videoBackground

Lightweight Responsive Video Background Plugin - videoBackground

A lightweight, responsive video background plugin for jQuery that allows you to use HTML5 or Youtube videos as backgrounds for specific containers.

1. Import jQuery library (slim build) and the jQuery videoBackground plugin into the html file.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="build/videoBackground.js"></script> 

2. Embed an HTML5 video into the document.

<div class="example">
  <video src="video.mp4" autoplay muted></video>
</div>

3. Call the function to make the HTML5 video work as a responsive background for the container 'example'.

$('.example').videoBackground();

4. You can also specify the aspect ratio of the background video. Default: 16:9.

$('.example').videoBackground({
  ratio_x: 16,
  ratio_y: 9
});

5. To use a Youtube video, follow these steps:

<div class="example">
  <div class="youtube-video" data-yt-id="VIDEO ID HERE"></div>
</div>
//init youtube
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var ytPlayers = [];
onYouTubePlayerAPIReady = function () {
    var players = document.querySelectorAll('.youtube-video');
    for (var i = 0; i < players.length; i++) {
        var player = new YT.Player(players[i], {
            playerVars: {
                'autoplay': 1,
                'loop': 1,
                'rel': 0,
                'showinfo': 0,
                'controls': 0,
                'modestbranding': 1,
                'playlist': players[i].getAttribute("data-yt-id")
            },
            videoId: players[i].getAttribute("data-yt-id"),
            events: {
                'onReady': onPlayerReady
            }
        });
        ytPlayers.push(player);
    }
};
function onPlayerReady(event) {
    event.target.mute();
    //init videoBackground for youtube video
    $('.example').videoBackground();
}

This awesome jQuery plugin is developed by lemehovskiy. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 28.06.2018
  • Source