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. You can obviously have a look at demo [Link]
- 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.
So now hopefully this trick will work and you will have that awesome video background for your blogger blog. Well still if you find any problem do comment below so that we can fix it up, well I want to thanks
(COMMENTS WILL LOAD AUTOMATICALLY)