Tuesday, 19 November 2013

How to Embed Youtube Video in Background of Blogger Blog?

Do you earning from youtube videos? If yes then you can increase your earnings by playing your Youtube videos in the background of your blogger blog. This way will enables you to earn more with adsense program.You can make money through Youtube and your blog both. For every single view of your Youtube video, you will get paid. In case you have more blogs, then you can earn a lot more by using this amazing trick. Play your own video behind your website. It will enables you to get more views on your videos. This method can be easily add by jquery plugin Tubular.So let's start rolling your fingers on this tutorial.

Drawbacks of this method:

  • Loading time of your blog will increase.
  • Mute option is not available. So if you don't want any sound on your blog, Choose a video which has no sound.
Let me explain how to add a Youtube video in the background of your blog.
    Go to Blogger Dashboard
    Search for </head> using CTRL+F and add the below code before it.


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
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('xCc0DTTFTyo','wrapper-video');
});
//]]>
</script>

Note: Replace xCc0DTTFTyo with ID of your Youtube video. It will appear at the end of the URL of youtube video.



  • Search for <body> tag using CTRL+F and paste the below code under it.
<div id='wrapper-video'>
  • Search for </body> tag using CTRL+F and paste the below code before it to close our div tag.
</div>

Finally, Click on Save template button.

That's it! You successfully added Youtube video to your blog's background. If you face any difficulty regarding this trick please let me know in comments till then Peace, Blessings and Happy Embedding. 

No comments:

Post a Comment