Adding a video to the blogger background

Adding a video to the blogger background

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='&quot;loading&quot; + 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>


Step5: Save theme and enjoy the new look of your blog.

5 comments:

  1. This is putting the video on top of my whole website.

    ReplyDelete
    Replies
    1. hey, can you share your blog URL. so i can check it out.

      Delete
    2. https://videobackgroundtest.blogspot.co.uk

      I've tried 3 slightly different tutorials and this happens with all of them.

      Delete
    3. This tutorial is for putting video to your blog background and i find everything working in a link you share.

      Delete
  2. "Sex and vicious wrongdoer registry background check" implies confirming that the chose candidate or representative does not have undisclosed feelings of certain sex and brutal violations in each locale where the candidate or worker right now or has dwelled.background check sites

    ReplyDelete