• RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Increase Website And Blog Traffic:latest article for Increasing Blog and website Traffic free gide.....
  • Create and Upload Site Map to Google:Google is fist largest Search Engine by upploading SITE MAP Google Easily Search Links from Ur site in Searching.......
  • Fix WEB SITE Errors:Google and other search engines always take those site in there fist page in searching which ha too less web Errors...
  • Top 20 Search Engine:Submit Ur site to top 20 Search Engines to Increasing Ur Site Traffic and making money top search engines like as Google, Yahoo, Ask, AOl, MSN...
  • Top Social Sites:Top 100 Social sites which real help U make a Affliate Marketer and in Pormoting ur Producdts...

New Posts

Adding a Youtube Video in the Background of a Blogger blog

Posted by Mohsin On 9/19/2013 01:23:00 AM 9 comments

Some of you might have wondered how to put a video to play in the blog's background, so that instead of having just a color or an image, to have a video. We can do this thanks to the jQuery plugin Tubular that lets you use a YouTube video as a background of a web page.

Although the result can be very original and attractive, I must say it has three drawbacks: they can not be silenced, if the video has ads, they will also appear, and it can slow the loading time of the blog, so if anyone wants to use it, may consider putting it only on special occasions, or on blogs that load very quickly.
Also it can be done in HTML5, the problem with this method is that you need to load the video in 3 different formats (.mp4, .webm and .ovg) along with a picture for browsers that do not support them, so this YouTube option seems more practical to me, despite the drawbacks.

blogger gadgets, blogger tricks, blogger widgets

You can see it working on this demo blog

Steps 

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'/>

<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>
And this one too:
<script type='text/javascript'>
//<![CDATA[
$().ready(function() {
$('body').tubular('61BLn00AN_w','wrapper-video');
});
//]]>
</script>
2. Then locate the <body> tag (CTRL + F)
Or if you are using a template from Template Designer, find this line:
<body expr:class='&quot;loading&quot; + 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.

If you are using jQuery, remove other versions that you have to avoid duplication and have problems.

Author | jQuery Tubular

9 comments:

Its not my first time to pay a quick visit this web site,
i am visiting this website dailly and take good information from here everyday.


My webpage; macnoje.centerblog.net ()

continuously i used to read smaller articles that as well
clear their motive, and that is also happening with
this paragraph which I am reading now.

Feel free to visit my web page :: counseling and mental health services

Hi this is kinda of off topic but I was wondering if blogs use WYSIWYG editors or if
you have to manually code with HTML. I'm starting a blog soon but have no coding expertise
so I wanted to get advice from someone with experience.
Any help would be enormously appreciated!

Here is my homepage read this (technologyintertweined.weebly.com)

Thanks for the auspicious writeup. It in truth was once a enjoyment
account it. Look advanced to more brought agreeable from you!
However, how could we keep up a correspondence?

My homepage; automotive repair shops Elk Grove CA

I love what you guys are up too. This type of clever work and coverage!
Keep up the superb works guys I've added you guys to my personal blogroll.



Visit my blog: auto restoration shops Sacramento

I would like to thank you for the efforts you've put in writing this site.
I really hope to view the same high-grade content by you in the future as well.
In truth, your creative writing abilities has inspired me
to get my very own blog now ;)

my web-site: which carpet cleaner

I believe what you wrote was very reasonable. However,
think about this, what if you added a little content?
I mean, I don't wish to tell you how to run your blog,
but what if you added a post title to maybe get folk's attention? I mean "Adding a Youtube Video in the Background of a Blogger blog" is a little
vanilla. You ought to look at Yahoo's home page and see how they create news titles to grab viewers to open the links.
You might add a related video or a related pic or two to get
people excited about what you've written. In my opinion, it would bring
your website a little bit more interesting.

Here is my page :: Weight Loss Center Sacramento

I seriously love your blog.. Great colors & theme. Did you build this website
yourself? Please reply back as I'm trying to create my own blog
and want to know where you got this from or what the theme is called.
Many thanks!

My homepage - auto body shop sacramento

Why people still use to read news papers when in this technological world all is accessible
on web?

Feel free to surf to my blog post; best carpet cleaning company

Post a Comment

All types of Comments are welcome