Adding A Youtube Video Inward The Background Of A Blogger Blog
Wednesday, March 25, 2020
Edit
Some of yous mightiness bring wondered how to seat a video to play inward the blog's background, too thus that instead of having simply a color or an image, to bring a video. We tin create this thank yous to the jQuery plugin Tubular that lets yous utilization a YouTube video equally a background of a spider web page.
Although the effect tin survive really master too attractive, I must nation it has 3 drawbacks: they tin non survive silenced, if the video has ads, they volition also appear, too it tin tiresome the loading fourth dimension of the blog, too thus if anyone wants to utilization it, may consider putting it entirely on particular occasions, or on blogs that charge really quickly.
Also it tin survive done inward HTML5, the work amongst this method is that yous postulate to charge the video inward 3 dissimilar formats (.mp4, .webm too .ovg) along amongst a film for browsers that create non back upward them, too thus this YouTube alternative seems to a greater extent than practical to me, despite the drawbacks.
You tin come across it working on this demo blog
Steps
1. The kickoff stride is to simply inward a higher house the </head> tag, this script:
Or if yous are using a template from Template Designer, notice this line:
Remember: There is no alternative to mute, too thus if yous don't desire to bring audio equally inward the demo blog, yous bring to conduct a video that has no sound. I also recommend using a video inward hard disk inward illustration yous don't desire whatsoever dark parts to demo simply about it.
If yous are using jQuery, take other versions that yous bring to avoid duplication too bring problems.
Author | jQuery Tubular
Although the effect tin survive really master too attractive, I must nation it has 3 drawbacks: they tin non survive silenced, if the video has ads, they volition also appear, too it tin tiresome the loading fourth dimension of the blog, too thus if anyone wants to utilization it, may consider putting it entirely on particular occasions, or on blogs that charge really quickly.
Also it tin survive done inward HTML5, the work amongst this method is that yous postulate to charge the video inward 3 dissimilar formats (.mp4, .webm too .ovg) along amongst a film for browsers that create non back upward them, too thus this YouTube alternative seems to a greater extent than practical to me, despite the drawbacks.
You tin come across it working on this demo blog
Steps
1. The kickoff stride is to simply inward a higher house 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 i 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 postulate Flash thespian 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();
});
supply 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 yous are using a template from Template Designer, notice 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, too earlier it seat this:
</div>Save the changes too that's it. In blood-red yous must seat the ID of Youtube video, the ID are the characters that seem at the cease of the URL:
Remember: There is no alternative to mute, too thus if yous don't desire to bring audio equally inward the demo blog, yous bring to conduct a video that has no sound. I also recommend using a video inward hard disk inward illustration yous don't desire whatsoever dark parts to demo simply about it.
If yous are using jQuery, take other versions that yous bring to avoid duplication too bring problems.
Author | jQuery Tubular