Skip to main content

How to Make YouTube Video As Blogger Background

Usually bloggers just try to be creative and try something new  that can gain more visitors or readers, so here comes another way to make any YouTube video as your blogger blog's main background image. Well thanks tubular jQuery effect we are able to do this in free blogging platform.
It sounds good and attractive but still has three major issues, the first is that video's cannot be silenced up, so if the video has any kind of inbuilt audio then you do not have any option to make it silent, the second one is that if the video has any ads rendering then it will even show up on your blog too and the third is obviously this effect will load up the video so it will take some extra loading time of your blog so if your blog is already very slow and full of widgets then you should not use this effect. But obviously at some occasions this effect will look awesome and will surely add a nice attribute to your blog.
  1. Open Blogger > Template > Edit HTML.
  2. Press Ctrl + F & search for </head> tag & paste below code above it.<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>//<![CDATA[
    function onYouTubePlayerReady(e){ytplayer=document.getElementById("myytplayer");ytplayer.setPlaybackQuality("medium");ytplayer.mute()}function resizePlayer(){var e=jQuery(window).width();var t=jQuery(window).height();jQuery("#yt-container, #video-cover").width(e).height(t);if(t>e/videoRatio){e=t*videoRatio}jQuery("#myytplayer").width(e).height(e/videoRatio)}var videoWidth=853;var videoRatio=16/9;var defaultDiv="wrapper-video";jQuery.fn.tubular=function(e,n){n=typeof n==undefined?"wrapper-video":n;t=setTimeout("resizePlayer()",1e3);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("#"+n).css({position:"relative","z-index":99});var r=0;var i=0;var s=0;var o=videoWidth/videoRatio;var u;var a='<iframe id="myytplayer" width="'+videoWidth+'" height="'+o+'" src="http://www.youtube.com/embed/'+e+"?autoplay=1&controls=0&modestbranding=1&showinfo=0&hd=1&iv_load_policy=3&version=3&wmode=transparent&loop=1&playlist="+e+'" frameborder="0" allowfullscreen></iframe>';jQuery("#ytapiplayer").html(a);jQuery(window).resize(function(){resizePlayer()});return this};$().ready(function(){$("body").tubular("61BLn00AN_w","wrapper-video")})//]]></script>
  3. Now again search for <body> or <body expr:class='&quot;loading&quot;+ data:blog.mobileClass'> tag & add below code below it.<div id='wrapper-video'>
  4. Now once again search for </body> tag & add below code above it.</div>
  5. Now your codes are placed, now its time to change the video to your personal one, just change the video ID in blue color in first code with your ID.
  6. You can find your YouTube video ID on every video URL like above.
  7. So just replace it and hit Save Template, that's it now your codes are placed and its time to check if this thing is working or not.
So now hopefully this trick will work and you will have that awesome video background for your blogger blog. You can also visit helplogger about this how to's.
Labels:

Comments

Post a Comment

Popular posts from this blog

9 Free & Open Source Forum Software Solutions

Forums can be a great way to encourage audience participation, and to change a website from a one dimensional entity into a full fledged community. There are a number of well developed open source forums out there on the web to help you create that, each with their own benefits. This review breaks down some of the best software out there in 2011 with a focus on everything from lightweight forum solutions to the all singing, all dancing heavyweights. Vanilla URL: http://vanillaforums.org/ Features URL: http://vanillaforums.org/features/embed-vanilla License: GPL Runs on: PHP / MySQL / Postgres Vanilla has always prided itself on clean underlying code, bringing together web standards, code reuse and css to create a product that kicks lumps out of 1990′s bulletin software that we’ve become accustomed to on the web. With many of the forum software solutions out there on the web carrying a technical burden of tables and bloatware, Vanilla brings with it a fresh approac
Post a Comment
Read me »

5 Free Websites to Create TimeTable Online

Here is a list of  5 free websites to create time table online . These websites let you plan all your classes, subjects; and create a timetable accordingly. Creating a timetable is both important and recommended as it helps you in scheduling things in a better way.  Especially during exam time, you can divide your time between different subjects, using a time table, and study accordingly. On these websites, you can add all your subjects, assignments that you have to do and make yourself a time table that will help you in reminding everything. Some of these websites also let you print your timetable. The 5 free websites to create time table here are  My Study Life, ExamTime, Class Schedule Maker, CollegeRuled, and revisionworld . My Study Life: The first website that allows you to create time table is   My Study Life . It is a very beautiful looking website with some very interesting features. You have to begin by creating a free account. After that, you can add all your subjects
Post a Comment
Read me »

Alternatives to Youtube

The most alternatives to youtube listed all in one place. Here you can find other video sites and also find out how to download and play back the videos. Be sure to visit  Video Search  page, where you can do FOUR SEARCHES AT ONCE - your results open in a four-paned window so that you can search for videos four times faster! http://www.5min.com 5min.com : Videopedia with instructional and DIY videos showing you how to do just about anything. http://www.abcnews.go.com/ ABC News Video : The MSM is finally waking up and putting their content online. See news reports, interviews and old media style content online. http://video.aol.com AOL Video : Millions of videos - as you would expect for a big rich company backed by Time/Warner. http://www.blinkx.com Blinkx  has over 35 million hours of video for you to browse and/or search through. Excellent interface and effects. http://www.blip.tv Blip.TV : Blip claims to level the playing field for independent shows since
Post a Comment
Read me »