Adding A Youtube Video Inwards The Background Of A Blogger Blog
Some of y'all mightiness accept wondered how to pose a video to play inwards the blog's background, in addition to thus that instead of having but a color or an image, to accept a video. We tin create this cheers to the jQuery plugin Tubular that lets y'all exercise a YouTube video equally a background of a spider web page.
Although the effect tin hold out rattling master in addition to attractive, I must nation it has 3 drawbacks: they tin non hold out silenced, if the video has ads, they volition also appear, in addition to it tin deadening the loading fourth dimension of the blog, in addition to thus if anyone wants to exercise it, may consider putting it exclusively on exceptional occasions, or on blogs that charge rattling quickly.
Also it tin hold out done inwards HTML5, the work amongst this method is that y'all bespeak to charge the video inwards 3 dissimilar formats (.mp4, .webm in addition to .ovg) along amongst a pic for browsers that create non back upwards them, in addition to thus this YouTube alternative seems to a greater extent than practical to me, despite the drawbacks.
You tin run across it working on this demo blog
Steps
1. The offset stride is to but higher upwards the </head> tag, this script:
Or if y'all are using a template from Template Designer, uncovering this line:
Remember: There is no alternative to mute, in addition to thus if y'all don't desire to accept audio equally inwards the demo blog, y'all accept to select a video that has no sound. I also recommend using a video inwards hard disk drive inwards instance y'all don't desire whatsoever dark parts to present approximately it.
If y'all are using jQuery, take away other versions that y'all accept to avoid duplication in addition to accept problems.
Author | jQuery Tubular
Although the effect tin hold out rattling master in addition to attractive, I must nation it has 3 drawbacks: they tin non hold out silenced, if the video has ads, they volition also appear, in addition to it tin deadening the loading fourth dimension of the blog, in addition to thus if anyone wants to exercise it, may consider putting it exclusively on exceptional occasions, or on blogs that charge rattling quickly.
Also it tin hold out done inwards HTML5, the work amongst this method is that y'all bespeak to charge the video inwards 3 dissimilar formats (.mp4, .webm in addition to .ovg) along amongst a pic for browsers that create non back upwards them, in addition to thus this YouTube alternative seems to a greater extent than practical to me, despite the drawbacks.
You tin run across it working on this demo blog
Steps
1. The offset stride is to but higher upwards the </head> tag, this script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>And this 1 too:
<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 bespeak Flash thespian 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();
});
provide this;
}
component onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.setPlaybackQuality('medium');
ytplayer.mute();
}
component 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'>2. Then locate the <body> tag (CTRL + F)
//<![CDATA[
$().ready(function() {
$('body').tubular('61BLn00AN_w','wrapper-video');
});
//]]>
</script>
Or if y'all are using a template from Template Designer, uncovering this line:
<body expr:class='"loading" + data:blog.mobileClass'>3. Under either of these two, add together this:
<div id='wrapper-video'>4. Now search for the </body> tag, in addition to earlier it pose this:
</div>Save the changes in addition to that's it. In ruddy y'all must pose the ID of Youtube video, the ID are the characters that seem at the goal of the URL:
Remember: There is no alternative to mute, in addition to thus if y'all don't desire to accept audio equally inwards the demo blog, y'all accept to select a video that has no sound. I also recommend using a video inwards hard disk drive inwards instance y'all don't desire whatsoever dark parts to present approximately it.
If y'all are using jQuery, take away other versions that y'all accept to avoid duplication in addition to accept problems.
Author | jQuery Tubular
