Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to Add a YouTube Video as Page Background in Blogger

If you are have searched the entire web and have not found the solution on how to add a Youtube video in your Blogger blog. Then this tutorial will teach you how to do so.

You should be thankful to the JQuery plugin Tubular that allows us to use YouTube videos as a Background for your Blogger blog.

Even though having a video as a background seems to look more attractive and original as well. But it has some drawbacks in it.

You can mute your background video.
If the YouTube video which you have added has ads then it will appear in your blog's background. and
It can slow down your blog loading time.

So, if you want a special reason or if your blog loads very fast then consider adding video background to your blog.

It can also be done using HTML5, but the problem with this method is that you will need to load the video in 3 different formats. Ie. Mp4, WebM, and ovg formats along with your picture for the browser that does not support the files.

Even though adding YouTube videos as a background has disadvantages, but practically I like it. So, let’s get started.

Step 1. Login to your Blogger blog and click theme/template and click on Edit HTML.

Step 2. Presiding Control + F, together type 

Step 3. Past the bellow two codes just above the 

Code 1.
jQuery('#' + wrapperId).css({position: 'relative', 'z-index': 99});
var ytplayer = 0;
var pageWidth = 0;
var pageHeight = 0;
var videoHeight = videoWidth / videoRatio;
var duration;
var iframe = '';
jQuery(window).resize(function() {
return this;
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
function resizePlayer() {
var newWidth = jQuery(window).width();
var newHeight = jQuery(window).height();
jQuery('#yt-container, #video-cover').width(newWidth).height(newHeight);
if (newHeight > newWidth / videoRatio) {
newWidth = newHeight * videoRatio;

Code 2.


Note – Replace the highlighted with your YouTube video code.

Step 4. The find by pressing Control + F to find the 
 tag or if you are using Template Designer’ template, then find the below line.

Step 5. Under either of these two, add the below code.


Step 6. Now again search /body tag, and paste the below code before the tag.


Kindly note that if you want your video to play soundless than choose a video that has no sounds because there is no option to mute the video.
If you are using jQuery, then remove your other versions so to avoid duplication and other issues.


This post first appeared on Wonder Krish, please read the originial post: here

Share the post

How to Add a YouTube Video as Page Background in Blogger


Subscribe to Wonder Krish

Get updates delivered right to your inbox!

Thank you for your subscription