How to use a Yotube movie as background of your HTML page

One of the latest component I’m working on is an easy to build custom Youtube player.

The new Youtube API allow developers to invoke a chrome-less AS3 player and use a javascript API to build our own controls, we have almost all the controls available: player.playVideo(), player.pauseVideo(), player.setVolume(), player.mute(), player.unMute(), player.getVideoStartBytes(), player.getVideoBytesTotal(), player.getVideoBytesLoaded(), player.getCurrentTime(), player.getDuration() … All we need to make a custom and customizable control tool for our movie player.

Going on developing it, a great idea was growing in me… Why not using any movie from Youtube  as background of a website page instead of images…
I sow a site (from http://jquery14.com) that uses a movie as background with a really nice effect (http://insideccs.com/#/before_getting_in/degree/). This is what I was thinking at.

And how to have this movieplayer as background?

Well, of course we can’t set it via CSS; this is not supported. But we can have a DIV with an absolute position containing our embedded chrome-less player  under all the other elements of the body; the EMBED must have the WMODE property set as TRANSPARENT to prevent the movie to be over the rest of the content and it must have WIDTH and HEIGHT set to “100%”.

And this is what my jquery.mb.YTPlayer plug-in can do for you; what you have to do is just insert a line of HTML code into your page, include the js in the head of your page and call the method. All the rest is the plug-in:

In the head:

 <script type="text/javascript" src="jquery.min.js"></script>
 <script type="text/javascript" src="jquery.metadata.js"></script>
 <script type="text/javascript" src="jquery.mb.YTPlayer.js"></script>

In the body:

<a href="[the youtube video URL]"
   class="movie
   {opacity:.4, isBgndMovie:{width:'1990',mute:false}, ratio:'4/3'}"> [Alternative link] </a>

And the js call:

<script type="text/javascript">
 $(function(){$(".movie").mb_YTPlayer();});
</script>

The plug-in can also be used as alternative Youtube player just removing the  isBgndMovie meta parameter; in that case you can specify the width, the aspect ratio (4/3 or 16/9) and you can customize the controls via CSS.

The advantage you whould have is also that the embed of the player is provided with all the browsers support controls using the swfobject.js.

Take a look at this video:

[youtube=http://www.youtube.com/watch?v=j47NH-tGl2A]

The jquery.mb.YTPlayer plug in is under development but it will be soon available.

If you are interested on you can download the 1.0rc3 from here.