Are you earn from youtube videos? You can increase your earnings by
playing your Youtube videos in the background of your blog. This way
will help you to earn with adsense program. All you know that making
money with google adsense account is only with the hosted content sites
and content sites. That are youtube and blogs. You can earn through
Youtube and your blogs. For each and views of your Youtube videos, you
gets paid. If you have more blogs, you can earn effectively with both
the blogs and youtube videos by the help of this trick. Play your video
at the back of your blog. It will help you to get more views. This
method can be done by jquery plugin Tubular.
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 ---> Template ---> Edit HTML
- Search for </head> using CTRL+F and add the below code behind 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 behind it.
</div>
Finally, Click on Save template button.
That's all. You are done!
Share this post if you like this. If you encounter any problem, feel
free and comment below to get solution instantly. Share your experience
with us.
0 comments:
Post a Comment