How To Embed A Youtube Video Equally Page Background Inwards Blogger

Some people mightiness endure wondering if at that spot genuinely exists a means to embed a YouTube video inward the background of a Blogger weblog that genuinely plays too plant simply similar every other unremarkably video embedded. Recently, 1 of our users asked us How to Embed a YouTube Video equally page Background inward Blogger? Embedding a YouTube video mightiness plow out to endure productive for a user who is selling a product, thence it could endure useful inward attracting customer’s attending too interest. Today inward this article, nosotros volition demo y'all How to Embed a YouTube Video equally page Background inward Blogger.

Although, the results tin endure wonderful too productive but on the other hand, it has 3 major drawbacks. The videos cannot endure paused, thence if at that spot is an promotion running on the video y'all cannot practise anything almost it. It mightiness boring downward your blog, thence earlier adding build certain y'all utilisation it purposely for distinctive causes.

Before implementing, build certain y'all practise non accept a site that is fairly large inward width. The maximum widget of y'all website content should non endure to a greater extent than than 700px, thence users tin easily savor the video playing inward the background. For additional modifications, y'all tin build your website a fleck of transparent to render to a greater extent than clear video appearance.

How to Embed a YouTube Video equally page Background inward Blogger:

The outset affair y'all demand to practise is to login into your Blogger.com account. After logging inward pick out a weblog on which y'all would similar to install the YouTube video inward the background. Now become to Template >> Edit HTML >> Search for the </head> tag too simply inward a higher house it glue the next code.

<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
|* past times Sean McCambridge
|* http://www.seanmccambridge.com/tubular
|* Copyright 2012
|* licensed nether 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 demand Flash histrion 8+ too JavaScript enabled to thought 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();
});
render this;
}
role onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.setPlaybackQuality('medium');
ytplayer.mute();
}
role 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('61BLn00AN_w','wrapper-video');
});
//]]>
</script>

After pasting the inward a higher house coding, in 1 lawsuit again inward the template hold off for <body> opened upwards tag too simply below it add together this little slice of code. However, if y'all are unable to detect <body> tag too thence endeavour searching <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> or similar slice of code.

<div id='wrapper-video'>

Since, nosotros accept added a opened upwards DIV id, its our undertaking to unopen it properly otherwise the template would popular errors. So straightaway search for the </body> ending tag too simply inward a higher house it glue this code.

</div> 

Important: Do non forget to replace 61BLn00AN_w  with the ID of YouTube video, the ID are the characters that look at the terminate of the URL. To render y'all assistance nosotros accept attached a screenshot below. Once everything is done, Save the template.

Congratulations; You accept successfully added a YouTube Video inward the background of y'all blogger site. Go too preview your website to come across if everything is working simply fine.

We promise this tutorial may accept helped y'all inward learning how to add together YouTube Videos inward blogger. It is essentially awesome affair to endure added inward your blogger enabled site. Firstly makes your production attractive too minute y'all accept zip to loose.