Search Results for “video background jquery”

How to set a YouTube video as your website background

Youtube video as website background

Browsing GitHub a while ago, we came across an excellent script which can really spice up any website. How would you like to add a YouTube video as your website background? Or maybe you just want an awesome header for you website? Sure, why not … Embed a YouTube video directly as background.

Why is this script so excellent? It’s just great, you can free your creative side, you can accomplish great things with it and of course it’s cross-browser compatible (from FireFox to Chrome,  Safari and Opera, and all Internet Explorer versions – yes, even IE6; not that we care that much about it, right?).  Now let’s into it.

About

The official name of this script is “jquery.mb.YTPlayer“ is a jQuery component that let you play a Youtube® movie in a chromeless player and use a movie as background of your HTML page.

Browser support:

  • Mozilla Firefox 2+
  • Google Chrome
  • Opera
  • Safari
  • IE 6+

Dependencies

  • jquery.metadata.js

The JS call

$(function(){
    $(".movie").mb_YTPlayer();
});

HTML constructor

<a id="bgndVideo" href="http://www.youtube.com/watch?v=uG2tV-X5NiQ"></a>

Meta data settings

*metadata are parameters setted in the class attribute of the TAG.

  • opacity: (int) 0 → 1;
  • isBgndMovie: {width:‘1990’,mute:false} // or false or true (in this case the movie will be width: ‘100%’ and mute:true by default);
  • ratio: ‘4/3’ // or “16/9” to set the aspect ratio of the movie;
  • quality: ‘default’ // or “small”, “medium”, “large”, “hd720”; (not implemented yet);
  • muteSound: true // or false (not implemented yet);
  • hasControls: true // or false (not implemented yet);
  • bufferImg: (string) Path to an image you whant to show while buffering;
  • ID: (string) the ID of the DOM element where you want the video background; if not specified it takes the “body”.

Using jquery.mb.YTPlayer

To initialize a YTPlayer as simple player:

  • set the meta data isBgndMovie of A tag to false;
  • set as HREF the url of the Youtube movie;
  • initialize the element or the elements: $(“.movie”).mb_YTPlayer();

To initialize a YTPlayer as background:

  • set the meta data isBgndMovie of A tag to true;
  • set as HREF the url of the Youtube movie;
  • set the opacity, the width, mute and the quality as meta data;
  • initialize the element or the elements: $(“.movie”).mb_YTPlayer();

To initialize a YTPlayer as element background (from v. 1.2.1):

  • set the meta data isBgndMovie of A tag to true;
  • set as HREF the url of the Youtube movie;
  • set the opacity, the width, mute, the quality and the ID of the element you want as target of the background movie as meta data;
  • initialize the element or the elements: $(“.movie”).mb_YTPlayer().

Download, Demo and Links

Finally, we have setup for 2 very simple demos of this spectacular jQuery component and a downloadable *.zip file to have the code prepared for you.

Also, here are some useful links:

We hope you will enjoy this component and once you implement it somewhere in your projects we would love to take a look at it. So let us know via de comment section your projects URL or your feedback, questions and so on. Also don’t forget to share with your friends if you like this and stay tuned for more awesomeness on WDC.

Download
Incoming search terms: