Although, the results tin endure wonderful in addition to productive but on the other hand, it has 3 major drawbacks. The videos cannot endure paused, thus if in that location is an promotion running on the video y'all cannot practise anything most it. It powerfulness tedious downward your blog, thus earlier adding construct certain y'all exercise it purposely for distinctive causes.
Before implementing, construct 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, thus users tin easily taste the video playing inward the background. For additional modifications, y'all tin construct your website a chip of transparent to furnish to a greater extent than clear video appearance.
How to Embed a YouTube Video equally page Background inward Blogger:
The commencement matter y'all demand to practise is to login into your Blogger.com account. After logging inward choose a weblog on which y'all would similar to install the YouTube video inward the background. Now acquire to Template >> Edit HTML >> Search for the </head> tag in addition to simply higher upward 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+ in addition to JavaScript enabled to persuasion 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;
}
business office onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.setPlaybackQuality('medium');
ytplayer.mute();
}
business office 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 higher upward coding, 1 time again inward the template await for <body> opened upward tag in addition to simply below it add together this little slice of code. However, if y'all are unable to notice <body> tag thus elbow grease searching <body expr:class='"loading" + data:blog.mobileClass'> or similar slice of code.
<div id='wrapper-video'>
Since, nosotros accept added a opened upward DIV id, its our project to unopen it properly otherwise the template would popular errors. So straightaway search for the </body> ending tag in addition to simply higher upward 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 destination of the URL. To furnish 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 in addition to preview your website to run 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 matter to endure added inward your blogger enabled site. Firstly makes your production attractive in addition to minute y'all accept nil to loose.
Comments