So, are you tired of those pictured or colour backgrounds for your blog and want to do something more creative than the only answer is a video background. You can make your blogger background live with a video background. Whenever a visitor visits your blog they start automatically and increase user attraction. However, keep in mind everything come with a drawback and the drawback is that these background video can slow down your site loading. But, if you still want to use a background video I will suggest using a short optimized video.
How to add video to blogger blog background?
Step1: It's a simple and easy step, upload your video to YouTube or choose a video from YouTube.
Step2: Note down id of video from the address bar.
Step3: Now, Go to blogger > Theme > Edit html , Search for <body and add below line of code after <body .
id='wrapper-video'
Your code should now look something like this
<body id='wrapper-video' expr:class='"loading" + data:blog.mobileClass'>
Step4: Search for </head >, Paste below codes just above it and change red bold text with YouTube video id you saved in Step2.
Step5: Save theme and enjoy the new look of your blog.
How to add video to blogger blog background?
Step1: It's a simple and easy step, upload your video to YouTube or choose a video from YouTube.
Step2: Note down id of video from the address bar.
Step3: Now, Go to blogger > Theme > Edit html , Search for <body and add below line of code after <body .
id='wrapper-video'
Your code should now look something like this
<body id='wrapper-video' expr:class='"loading" + data:blog.mobileClass'>
Step4: Search for </head >, Paste below codes just above it and change red bold text with YouTube video id you saved in Step2.
<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
|* 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'>//<![CDATA[
$().ready(function() {
$('body').tubular('1G4isv_Fylg','wrapper-video');
});//]]></script>
<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'>//<![CDATA[
$().ready(function() {
$('body').tubular('1G4isv_Fylg','wrapper-video');
});//]]></script>
Step5: Save theme and enjoy the new look of your blog.
