If you've ever wondered how to incorporate a video into the background of your blog instead of using a simple color or image, there's a solution. The jQuery plugin Tubular enables you to utilize a YouTube video as the backdrop for your web page.
While the outcome can be highly original and visually appealing, it's important to note three drawbacks. Firstly, the videos cannot be muted, meaning the sound will play alongside the content. Secondly, if the YouTube video includes advertisements, they will also be displayed. Lastly, implementing this feature may cause slower loading times for your blog. Therefore, it is advisable to use it sparingly, such as on special occasions or blogs that load quickly.
Alternatively, achieving a video background can be done using HTML5. However, this method requires loading the video in three different formats (.mp4, .webm, and .ovg), as well as providing an image fallback for browsers that do not support video. Despite this approach, I find the YouTube option more practical due to its convenience, notwithstanding the mentioned drawbacks.
Adding a Youtube Video in the Background of a Blogger blog Step by Step Guide
1. The first step is to just above 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 one too:
<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'>2. Then locate the <body> tag (CTRL + F)
//<![CDATA[
$().ready(function() {
$('body').tubular('61BLn00AN_w','wrapper-video');
});
//]]>
</script>
Or if you are using a template from Template Designer, find this line:
<body expr:class='"loading" + data:blog.mobileClass'>3. Under either of these two, add this:
<div id='wrapper-video'>4. Now search for the </body> tag, and before it put this:
</div>Save the changes and that's it. In red you must put the ID of Youtube video, the ID are the characters that appear at the end of the URL:
Remember: There is no option to mute, so if you don't want to have sound as in the demo blog, you have to choose a video that has no sound. I also recommend using a video in HD in case you don't want any black parts to show around it.
Comments
Post a Comment
All types of Comments are welcome