You might wondered by seeing a YouTube video in the background of many blogs. It makes the blog more beautiful. Also, some bloggers uses this feature to give all information about the niche of their blog which could helps the readers to know whats inside the blog and they can decide whether to subscribe on it or not.
But, remember that sometimes this can increase your page loading time. Also, the video cannot be paused, so if the video is too long, then it will irritate the readers. There is a one more drawback that if the videos contains any add, then user will have to watch it and this will reduce your blog's reputation and traffic.
In this post, I will show you how you can embed a YouTube video on your blogs also. Just follow this guide and you will be doing it on your blog within minutes.
But, remember that sometimes this can increase your page loading time. Also, the video cannot be paused, so if the video is too long, then it will irritate the readers. There is a one more drawback that if the videos contains any add, then user will have to watch it and this will reduce your blog's reputation and traffic.
In this post, I will show you how you can embed a YouTube video on your blogs also. Just follow this guide and you will be doing it on your blog within minutes.
Embed YouTube Videos In Your Blog's Background
Step 1 : Open your blogger's dashbaord. Go to 'Template' and edit your template in HTML form.
Step 2 : Now open the search box by using the keys Control+F and search for </head>.
Step 3 : Just above </head>, copy and paste the following code given below.
<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('81LLg23KM_w','wrapper-video');
});
//]]>
</script>
Step 4 : Now again search for <body> and just below it paste the following code given below.
<div id='wrapper-video'>
Step 5 : Now search for </body> and just above it write </div> to end the above added tag.
Step 6 : Now replace 81LLg23KM_w with the YouTube video ID of your video.
You will find video ID in the URL of that video as shown in the below picture.
Here the highlighted text is the video id of that video.
Step 7 : Save the template and you are done with it.
I hope this tutorial helped you to embed YouTube videos in your blog's background. If you face any problem then feel free to ask below in comments.
