Lightweight Responsive Video Background Plugin - videoBackground

File Size: 6.01 MB
Views Total: 1845
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="" 
<script src="build/videoBackground.js"></script> 

2. Embed an HTML5 video into the document.

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

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


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

  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>
//init youtube
var tag = document.createElement('script');

tag.src = "";
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



function onPlayerReady(event) {;

    //init videoBackground for youtube video


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