Youtube video as website background

Question

Is there a way to embed a youtube video as the background of a webpage with html, css and javascript with the actual content of the site on top? as?

basically, it should be a video that automatically plays, is turned off (but the volume can be raised by the visitor), and the site should work well on it (the site is minimal, so most of the video should be visible at all times). the site is minimal, that in most browsers by default no scrollbars will be visible, and the video should be 100% of the width and height.

examples? links?

tried google but couldn't find it.

it should also work for non-YouTube videos.

html5 and css3 are preferable :)

I REALLY NEED A SOMEWHERE LIVE EXAMPLE (or how close) because I tried everything (as accessible via google and failed)

also, related - in my opinion, there is no (in my own research) any way to slow down YouTube video playback (for example: 24 times slower) - true / false?

Answer 1

There are two ways to answer this question:

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

• Do not do that. Jokes aside. Do not place the movie behind the main content of the site. You smooth out your client base, forcing the hare of the site to view and read, as well as violate about ten or two other recommendations in a good site design. Why not put the video in the document stream where it belongs?

Answer 2

You probably found a solution, but just in case you are not ... have you tried http://www.seanmccambridge.com/tubular/ ?

Answer 3

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

Answer 4

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

Answer 5

you have this library too:

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

The only thing you need to do is include the js file and put this script in your body:

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

By way of explanation:

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

Answer 6

Well, you can completely position the tag or use CSS to set the height and width. Use javascript to simulate a button click. set the zIndex element to the background.

Answer 7

Hi, how tubular is quite complicated, I have 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 is the full youtube API cover text extracted from the tubular. Jquery required. Also the standard youtube html5 iframe api code should be included - as indicated 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 } }