Play YouTube video as background of specific HTML section in Rails

In one of my rails projects, my client wanted to show a youtube video as a background of a specific section of the page. At first, I implemented with tubular, but later I found that it was not working on iPhone 6. After searching a lot, I found the YTPlayer js library.

In this article, I will show you how to use the YTPlayer show youtube video as a background of the page.

This is a rails project. If you are using any other language or framework, then you might have to change the location of your code.

• Download YTPlayer from https://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-ytplayer/
• Place the file jquery.mb.YTPlayer.min inside app/assets/js folder.

Then add the following lines to application.js

//= require jquery
//= require jquery.mb.YTPlayer.min
//= require custom

Following is the part of HTML code where I would like to add YouTube background.

<section class="header1" id="video_wrapper">
  <div class="bg_guard"></div>
  <p>
  	This is the simple content of the div. lorem ipsum dolor sit amet.
  </p>
</section>

I have created custom.js file inside app/assets/js/ folder.

I have added the following code to custom.js –

$("document").ready(function() {
	jQuery('#video_wrapper').YTPlayer(
          {
            videoURL: 'https://www.youtube.com/watch?v=T73h5bmD8Dc',
            containment: '#video_wrapper',
            startAt:0,
            mute:true,
            autoPlay:true,
            loop:true,
            opacity:1
          }
      );
});

Notice: ‘videoURL’ value. It is the URL of the YouTube page.

Also Notice one thing, you must put mute: true. Otherwise it will not autoplay on iphone and many other browsers.

Well, now we are ready to go.