How to Embed a YouTube Video as Page Background in Blogger

Advertisements
Some people might be wondering if there really exists a way to embed a YouTube video in the background of a Blogger blog that actually plays and works just like every other normally video embedded. Recently, one of our users asked us How to Embed a YouTube Video as page Background in Blogger? Embedding a YouTube video might turn out to be productive for a user who is selling a product, so it could be useful in attracting customer’s attention and interest. Today in this article, we will show you How to Embed a YouTube Video as page Background in Blogger.

Although, the results can be wonderful and productive but on the other hand, it has three major drawbacks. The videos cannot be paused, so if there is an ad running on the video you cannot do anything about it. It might slow down your blog, so before adding make sure you use it purposely for distinctive causes.

Before implementing, make sure you do not have a site that is fairly large in width. The maximum widget of you website content should not be more than 700px, so users can easily enjoy the video playing in the background. For additional modifications, you can make your website a bit of transparent to provide more clear video appearance.

How to Embed a YouTube Video as page Background in Blogger:

The first thing you need to do is to login into your Blogger.com account. After logging in select a blog on which you would like to install the YouTube video in the background. Now go to Template >> Edit HTML >> Search for the </head> tag and just above it paste the following code.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/* jQuery tubular plugin
|* by Sean McCambridge
|* http://www.seanmccambridge.com/tubular
|* Copyright 2012
|* licensed under the MIT License
|* Enjoy.
|*
|* Thanks,
|* Sean */
var videoWidth = 853;
var videoRatio = 16/9;
var defaultDiv = 'wrapper-video';
jQuery.fn.tubular = function(videoId,wrapperId) {
wrapperId = (typeof(wrapperId) == undefined) ? 'wrapper-video' : wrapperId;
t = setTimeout("resizePlayer()",1000);
jQuery('html,body').css('height','100%');
jQuery('body').prepend('<div id="yt-container" style="overflow: hidden; position: fixed; z-index: 1;"><div id="ytapiplayer">You need Flash player 8+ and JavaScript enabled to view this video.</div></div><div id="video-cover" style="position: fixed; width: 100%; height: 100%; z-index: 2;"></div>');
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 = '<iframe id="myytplayer" width="' + videoWidth + '" height="' + videoHeight + '" src="http://www.youtube.com/embed/' + videoId + '?autoplay=1&controls=0&modestbranding=1&showinfo=0&hd=1&iv_load_policy=3&version=3&wmode=transparent&loop=1&playlist=' + videoId + '" frameborder="0" allowfullscreen></iframe>';
jQuery('#ytapiplayer').html(iframe);
jQuery(window).resize(function() {
resizePlayer();
});
return this;
}
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.setPlaybackQuality('medium');
ytplayer.mute();
}
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;
}
jQuery('#myytplayer').width(newWidth).height(newWidth/videoRatio);
}
//]]>
</script>

<script type='text/javascript'>
//<![CDATA[
$().ready(function() {
$('body').tubular('61BLn00AN_w','wrapper-video');
});
//]]>
</script>

After pasting the above coding, again in the template look for <body> open tag and just below it add this small piece of code. However, if you are unable to find <body> tag then try searching <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> or similar piece of code.

<div id='wrapper-video'>

Since, we have added a open DIV id, its our job to close it properly otherwise the template would pop errors. So now search for the </body> ending tag and just above it paste this code.

</div> 

Important: Do not forget to replace 61BLn00AN_w  with the ID of YouTube video, the ID are the characters that appear at the end of the URL. To provide you assistance we have attached a screenshot below. Once everything is done, Save the template.


Congratulations; You have successfully added a YouTube Video in the background of you blogger site. Go and preview your website to see if everything is working just fine.

We hope this tutorial may have helped you in learning how to add YouTube Videos in blogger. It is essentially awesome thing to be added in your blogger enabled site. Firstly makes your product attractive and second you have nothing to loose.

Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

11 comments

October 8, 2013 at 7:18 PM

where is demo? hehehe or preview

October 12, 2013 at 3:00 PM

wow it soo goood thank for share .. i like it ..

October 13, 2013 at 3:16 AM

Thanks for this tutorial. I was looking for this a while. Keep blogging

October 13, 2013 at 3:17 AM

hello it doesn't work

Editorial Team MOD
October 14, 2013 at 4:54 PM

Works fine, What error you're facing?

Editorial Team MOD
October 14, 2013 at 5:28 PM

Here's your Demo :D

http://tubulardemo.blogspot.ro/

October 16, 2014 at 3:12 AM

Does this work on tumblr? :|

Editorial Team MOD
October 17, 2014 at 3:12 AM

Yes it should,

January 31, 2016 at 3:46 AM

Hi i'm from the future, I have futuristic method for this, simply put this code under body tag :

<(d.i.v) style="position: fixed; z-index: -99; width: 100%; height: 100%">
<(i.f.r.a.m.e.) frameborder="0" height="100%" width="100%"
src="https://youtube.com/embed/ID?autoplay=1&controls=0&showinfo=0&autohide=1">



Change the ID to any video's ID that you like.
Please be noted, do not remove the question mark "?" after the "ID".
Due to the comments rule, i can't type "div" and "iframe" exactly as how it should, tag is not allowed.

August 19, 2016 at 9:09 PM

If it's not working for you, you need to go into your blog settings and turn off https

March 14, 2018 at 9:24 AM

@Cookiemonster "Error parsing XML, line 2957, column 2: The content of elements must consist of well-formed character data or markup."

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.