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:

32 Comments

  1. Mia

    Adrian this is just what I needed !!! I just took on a client who wants their Fashion Video to serve as the main background of their website , and this is just awesome !
    You saved me :D

    Deeply Appreciate your efforts once again :)

  2. Bret

    This is what I have been looking for forever. Being a video editor an a web designer this makes me very excited!

    Big problem. It is not working on the IPad and IPhone!

    • Glad you find it useful. And yes, indeed it’s not supported on iOS, because it’s still using *.flv. Maybe a future release will allow HTML5 and then we solve this problem.

  3. Nino

    I can’t seem to get this done, so – is there a way to get the actual content of the video fill the screen, as in, make the player crop footage in the way that it removes the black areas on top and bottom (or left and right, depending on proportions) where there isn’t any footage?

    I hope you know what i’m trying to do… I’m trying to fill the whole page with video, not having “empty” spaces on the sides.

    I’m not succeeding even in manually setting “left” and “top” by editing the script. It’s like those two properties have no effect. Although the actual crop option in video would make me happiest, any workaround will do good.

  4. This really depends on the video’s aspect ratio too. If you’re searching for a quick workaround you can always use a div as background (something like a main-wrapper) and set the video as background for that div, finally styling it via CSS of course.

  5. Badman

    IE9 not supported!
    Build it in right here,
    But this as well as the demo don’t work in that bad,.. bad browser!

  6. Joseph

    Thanks for this!

    Is there a way to get rid of the youtube logo on the bottom right?
    Tried adding “?modestbranding=1″ to the end of the youtube url, with no luck.

    • bibah

      HI. I tried using this code on a weebly.com site and I am very confused. What do I need to know in order to implement this? Metadata? Html? help I’m lost. Not stupid. just at a disadvantage. Thanks

  7. Hi, thank you for the great code. We have tried it in an array of browsers and have found no problem with it. Check out http://www.northside.co.uk to see it in action. Once again, many thanks

  8. Zaheer

    Dear you can keep the track by hiding that part of the video, mean putting dive over the video bottom.

  9. Trying to get this running for a client with a Joomla website, but I cant seem to get it to layer behind the content… its just floating on top of everything at the moment. =/

    Any ideas?

  10. Kim

    Is there a way to set the video to loop?

  11. Awesome script. It’s easy to install and use and just what I had been looking for.

  12. Looping would be great…this is awesome code…definantly appreciate it to the originators. Trying to get the video to loop would even be that much more awesome!

  13. My brother recommended I might like this website.

    He was entirely right. This submit actually made my day.
    You can not imagine simply how much time I had spent for this information!
    Thanks!

  14. Carissa

    Pretty! This has been a really wonderful post. Many thanks for supplying this info.

  15. dance club VIP

    You really nailed in with a good posting with a bit of wonderful information

  16. Jerry zaf

    Thanks for the info, im trying in now will after complete will post link

  17. seena

    does anyone know how i can have two div videos running on the same page at once?

  18. fort worth movers

    Exellent post just waht i was looking for, my youtube video will look grat as backround!

  19. lillith phillips

    is there a way to enable sound with this

  20. Mori

    Trying this now, thanks for the info!

  21. Fort Worth movers

    This is great, I was trying to make one of my business YouTube’s customer testimonial as a background but everything I tried didn’t work, your way works and looks great.
    So thank you for the help and have an awesome day.

  22. Albuquerque long distance movers

    Great way to add your youtube as a background, I need to add 2 of them on the same page do you have a way to do that? I will appreciate your help thanks.

  23. Homeo

    Thanks for the info, good post, BIG thumbs up!

  24. long distance movers phoenix

    This is exactly what I was looking for, I am making a page with customers youtube testimonials and this is awesome for that page, thanks a million.

  25. movers Houston TX

    That is great I was looking for that, I wonder if the information for YouTube will work on different video platforms? like flicker and vimo, or even if I host my own video?

  26. шаран

    Wonderful work! This is the kind of information that are meant to be shared around the web.
    Shame on Google for now not positioning this put up upper!
    Come on over and discuss with my web site . Thanks =)

  27. Ayour

    Excellent idea, i will try it … thanks

  28. Anonymous

    Talking about site speed, using youtube video as a background, won’t it slow down my blog?

  29. Jamie Hayes

    Been looking for a way to place youtube as a background Thanks for the much help delivered.
    Cheers

  30. Anonymous

    Works on all browsers thanks!

Leave a Comment