Responsive Youtube Video Background with jQuery

Another way to create Responsive Youtube Video Background with jQuery. It’s a fullscreen solution and scaled an aspect ratio of 16/9.

Furthermore, you can place the content over the video and make it align the center of the page. It’s easy to make the HTML5 video as a background and make it fullscreen but for Youtube or Vimeo, we need to take help of Javascript.

In this tutorial, I will not just make work the Youtube video as background but also make it resize for all kind of devices. In addition, I will make compatible with all modern browsers.

Normally you have seen a bad black bars issue around the video when we apply the height and width 100%. But in this solution, this will not happen and the video will work in fullscreen mode.

The video will fill the whole window at all times without any stretching. And, it will cover the full page according to the size of the browser window.

How to Make Youtube Video Background

You can download the script and add the following files before the closing </head>

<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="video.js"></script>

Also, make sure that you have the main Jquery file call in your theme or template. if it’s not there then you can add it like that way.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

The HTML

After adding the files, you are almost ready to use the plugin. Now you need to add the HTML.

<div class="video-wrapper" data-video-id="ORuz_i59Dfs" data-video-youtube-link="y" data-video-start="75" data-video-end="140" data-video-width-add="100" data-video-height-add="100" style="height: 800px;">
    <div class="video-overlay" style="background-color: #000; opacity: .70"></div>
    <div class="tv">
    	<div class="screen mute" id="tv"></div>
    </div>
</div>

In HTML, we have the main wrapper of video which holds the data attribute. The data-video-id attribute allows adding youtube video ID which can find in the video URL.

If you want to add content over the background video you can do that by simply adding another div with class name cover. You need to place this code just right above the video wrapper HTML code.

<div class="cover">Content Goes Here</div>

The Javascript

If you already added video.js then this code not required to add. But if you want to implement the script into your existing file then you can just copy & paste it.

// Grab data attributes from video-wrapper
var videoID = $(".video-wrapper").data("video-id");
var videoYouTubeLink = $(".video-wrapper").data("video-youtube-link");
var videoStart = $(".video-wrapper").data("video-start");
var videoEnd = $(".video-wrapper").data("video-end");
var videoWidthAdd = $(".video-wrapper").data("video-width-add");
var videoHeightAdd = $(".video-wrapper").data("video-height-add");

// Create video script element
var tag = document.createElement('script');
  tag.src = 'https://www.youtube.com/player_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Prepend expander if data attr is yes
if (videoYouTubeLink === 'y') {
  $(".video-wrapper").prepend('<a href="https://www.youtube.com/watch?v=' + videoID + '" class="video-expand" target="_blank">View on Youtube</a>');
}
// Setup the Youtube TV with player defaults
var tv,
  playerDefaults = {autoplay: 0, autohide: 1, modestbranding: 1, rel: 0, showinfo: 0, controls: 0, disablekb: 1, enablejsapi: 0, iv_load_policy: 3};
var vid = {'videoId': videoID, 'startSeconds': videoStart, 'endSeconds': videoEnd, 'suggestedQuality': 'hd720'};
function onYouTubePlayerAPIReady(){
  tv = new YT.Player('tv', {events: {'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange}, playerVars: playerDefaults});
}
function onPlayerReady(){
  tv.loadVideoById(vid);
  tv.mute();
}
function onPlayerStateChange(e) {
  if (e.data === 1){
    $('#tv').addClass('active');
  } else if (e.data === 0){
    tv.seekTo(vid.startSeconds)
  }
}
function vidRescale(){
  var w = $(window).width() + videoWidthAdd,
    h = $(window).height() + videoHeightAdd;
  if (w/h > 16/9){
    tv.setSize(w, w/16*9);
    $('.tv .screen').css({'left': '0px'});
  } else {
    tv.setSize(h/9*16, h);
    $('.tv .screen').css({'left': -($('.tv .screen').outerWidth()-w)/2});
  }
}
$(window).on('load resize', function(){
  vidRescale();
});