Play YouTube video as background of specific HTML section in Rails

, , Leave a comment

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.

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>
  	This is the simple content of the div. lorem ipsum dolor sit amet.

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

I have added the following code to custom.js –

$("document").ready(function() {
            videoURL: '',
            containment: '#video_wrapper',

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.


Leave a Reply