September 19, 2013

How to Make YouTube Video as your Blogger Background

So usually blogger's just try to get creative and try out something new something attractive that can usually gain more visitors and readers, so here comes another awesome way to make any YouTube video as your blogger blog's main background image. Well thanks tubular jQuery effect we are able to achieve this in free blogging platform.

So now as the name sounds it obviously looks good and attractive but still has three major issues, the first is that video's cannot be silenced up, so yes if the video has any kind of inbuilt audio then you do not have any option to make it silent, the second one is that if the video has any ads rendering then it will even show up on your blog too and the third is obviously this effect will load up the video so it will take some extra loading time of your blog so if your blog is already very slow and full of widgets then you should not use this effect. But yes obviously at some occasions this effect will look awesome and will surely add a nice attribute to your blog.
So now if you agree to all the above points and still want to add it to your blog below are the steps that will allow you to make any video as your blogger background.

Open Blogger > Template > Edit HTML.
Press Ctrl + F & search for </head> tag & paste below code above it. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>//<![CDATA[
function onYouTubePlayerReady(e){ytplayer=document.getElementById("myytplayer");ytplayer.setPlaybackQuality("medium");ytplayer.mute()}function resizePlayer(){var e=jQuery(window).width();var t=jQuery(window).height();jQuery("#yt-container, #video-cover").width(e).height(t);if(t>e/videoRatio){e=t*videoRatio}jQuery("#myytplayer").width(e).height(e/videoRatio)}var videoWidth=853;var videoRatio=16/9;var defaultDiv="wrapper-video";jQuery.fn.tubular=function(e,n){n=typeof n==undefined?"wrapper-video":n;t=setTimeout("resizePlayer()",1e3);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("#"+n).css({position:"relative","z-index":99});var r=0;var i=0;var s=0;var o=videoWidth/videoRatio;var u;var a='<iframe id="myytplayer" width="'+videoWidth+'" height="'+o+'" src="http://www.youtube.com/embed/'+e+"?autoplay=1&controls=0&modestbranding=1&showinfo=0&hd=1&iv_load_policy=3&version=3&wmode=transparent&loop=1&playlist="+e+'" frameborder="0" allowfullscreen></iframe>';jQuery("#ytapiplayer").html(a);jQuery(window).resize(function(){resizePlayer()});return this};$().ready(function(){$("body").tubular("61BLn00AN_w","wrapper-video")})//]]></script>
Now again search for <body> or <body expr:class='"loading"+ data:blog.mobileClass'> tag & add below code below it. <div id='wrapper-video'>
Now once again search for </body> tag & add below code above it. </div>
Now your codes are placed, now its time to change the video to your personal one, just change the video ID in blue color in first code with your ID.
You can find your YouTube video ID on every video URL like above.
So just replace it and hit Save Template, that's it now your codes are placed and its time to check if this thing is working or not.