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