youtube video as web site background

is there a way to embedd youtube video as a background of a web page with html, css and javascript with the actual site content on top? how?

basically, it should be a video that auto plays, is muted (but the volume can be turned up by the visitor) and the site should work well being on top of it (the site is minimal so most of the video should be visible at all times). the site is minimal enough that no scroll bars would be visible by default in most browsers and the video should be 100% width and height.

examples? links?

tried Google but couldn't find it.

also it should work for videos not on youtube.

html5 and css3 preferred :)

I REALLY NEED A LIVE EXAMPLE SOMEWHERE (or as close to) because i t开发者_JS百科ried it all (as available via google and failed)

also, related - there doesn't seem to be (as per my own research) any way of slowing down the play of youtube videos (for example: 24 times slower) - true / false?

---

You have probably found a solution by now but just in case you haven't...have you tried http://www.seanmccambridge.com/tubular/ ?

---

<div style="position: fixed; z-index: -99; width: 100%; height: 100%">
  <iframe frameborder="0" height="100%" width="100%" 
    src="https://youtube.com/embed/ID?autoplay=1&controls=0&showinfo=0&autohide=1">
  </iframe>
</div>

// Replace ID with the actual ID of your YouTube video

http://www.labnol.org/internet/youtube-video-background/27933/

---

you got this library as well:

http://florian-chapon.fr/dev/youtube-background/

the only thing you have to do, is include the js file, and put this script on your "body":

$(document).ready(function() {  
    ytbg("vQWlNALvbhE", 0, 17, 1);
});

As an explanation:

ytbg("video link", starttime, endtime, volume).

---

for completeness sake adding http://okfoc.us/okvideo/ here. Also does Vimeo.

---

There are two ways to answer this question:

1. Set the flash player's wmode to transparent, put it in an absolute div with a low z-index. Put the content in another absolute div with a higher z-index.

2. Don't do it. Seriously. Don't put a movie behind the site's main content. You are aliening your customer base, making the site hare to view and read, and violating about a dozen or two other guidelines in good site design. Why not put the video inside the flow of the document where it belongs instead?

---

Well you could absolute position the tag or the , use CSS to set the height and width. Use javascript to simulate clicking on the button. set the element zIndex to the background.

---

Hi, as tubular is quite suffisticated, i extracted the necessary code for you.

html code:

<div id="player-container" style="overflow: hidden; position: absolute; width: 100%; height: 100%;">
            <div id="player" style="position: absolute">
</div>

here comes the complete youtube API cover style stuff, extracted from tubular. jquery is needed. Also the standard youtube html5 iframe api code must be included - as given here: https://developers.google.com/youtube/iframe_api_reference#Getting_Started

 var ratio = 16 / 9;
 window.onPlayerReady = function (e) {
     resize();
 }

 $(window).on('resize', function () {
     resize();
 })

 var resize = function () {
     console.log("resize");

 var heightcorrection = 0,
         width = $(window).width(),
         pWidth, // player width, to be defined
         height = $(window).height() - heightcorrection,
         pHeight, // player height, tbd
         $videoPlayer = $('#player');        

     if (width / ratio < height) { // if new video height < window height (gap underneath)
         pWidth = Math.ceil(height * ratio); // get new player width
         $videoPlayer.width(pWidth).height(height).css({
             left: (width - pWidth) / 2,
             top: 0
         }); // player width is greater, offset left; reset top  

     } else { // new video width < window width (gap to right)
         pHeight = Math.ceil(width / ratio); // get new player height
         $videoPlayer.width(width).height(pHeight).css({
             left: 0,
             top: (height - pHeight) / 2 
         }); // player height is greater, offset top; reset left

     }

 }