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='"loading" + 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.
About the Editorial TeamThe Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).
10 comments
wow it soo goood thank for share .. i like it ..
Thanks for this tutorial. I was looking for this a while. Keep blogging
hello it doesn't work
Works fine, What error you're facing?
Here's your Demo :D
http://tubulardemo.blogspot.ro/
Does this work on tumblr? :|
Yes it should,
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.
If it's not working for you, you need to go into your blog settings and turn off https
@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.