How to Embed a YouTube Video as Page Background in Blogger
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('71BLn00VN_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 71BLn00VN_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.
0 comments:
Your comments always welcome