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.

How to use it:

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.