How To Add Youtube Video In Background Of Blogger Prajjwal Rajput Friday, August 22, 2014 No Comment

Hi friends after the long I'm back with the interesting tricks for you and we had previously shared a template for your blogger blog which is designed by me and jillur rahman. So if you have not download our first blogger template so don't worry click this link to download NBT Custom Theme for Blogger blogs I hope you like this template and upload in your blogger blog. So let's going to toady's post that is how to embed or how to play youtube video in background of blogger blogs. 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.

Some of you might have wondered how to put a video to play in the blog's background, so that instead of having just a color or an image, to have a video. We can do this thanks to the Jquery Plugin Tubular this plugin are using in to embed youtube video in another webpages.

Well, before implement this you can may be see its demo of this youtube background in blogger blog. To see the live demo of this just hit the below live demo button.

Live Demo

Notice:-
Before adding the video in blogger blog, make sure you do not have a site that fairely large width the maximum widget of your blog content should not be more that 700px-800px so your visitors can easily enjoy the video playing in the background for additional modifications, you'an make your blogger template a bit of transparent just like of DEMO blog to provide more clear video appearance.

How To Add Youtube Video In Background Of Blogger Blogs?
Always Before editing your blogger template and make changes your HTML coding remembered that you can make your blogger template backup and save it in your hard drive then you can start your editing to add you tube video in background of blogger. Just follow my below steps.

• Go To Blogger Dashboard>>Template>>Backup Your Template.
• Click on "Edit HTML" button.
• Find the below code Using Ctrl+F

</head>

• Paste the Following Code just above </head>

 <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 find the below tag

<body>

• Or of you're using a default blogger template, then find this below line.

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

•  Under either of these two, then add this.

<div id='wrapper-video'>

• Now, find the below tag

</body>

• Paste the below tag just above </body> 

</div>

• Finally Save Your Template.
• You're Done! 

Remember:- Don't forget to change 61BLn00AN_w with your youtube video ID, these ID are appears at the end of the URL, to provide you assistance we've attached a screenshot for better understanding.

 Please Specially thanks to Sean McCambridge.

Final Words
So friends this our today's long tutorial I hope this tutorial may have helped you in learning that how to play youtube video in background of blogger blogs. It is essentialy awesome thing to be added in your blogger enabled site. If you're facing problem during this process then feel free to ask below comments box for your solution and don't forget to like our Facebook page and also share this tutorial with your friends on social networking site keep visiting us.
Happy Blogging!

Tweet

Tags: Blogging Tips / Tutorials