Video as background on a website playing on command

Question

I've been trying to set a video as background, I have the flv-file and youtube-link. Putting it on my website isn't that difficult with html5 video-tag or jquery but I can't find how I can put it on my website but not auto starting. I have a semi-transparent rectangle where the text will come over. So my idea was creating a button or link to let the text and rectangle dissappear and letting the video play.

Does anyone knows a good plugin or script to do this or can someone bump into the right direction.

greetz

At the moment i have the video at the top and below that the rest of my site xs, i can't seem to put the video as background. — jochemke, Aug 10 '12 at 15:08

score 4 · Accepted Answer · edited Aug 27 '15 at 12:15

4

You can do this with native browser html5 video player too which will be much faster, no need to use a plugin. Try this:

Here is working jsFiddle example.

jQuery:

$(document).ready(function() {
    var windowH =  $(window).height();
    $('#main_container, #overlay').height(windowH);
    $(window).resize(function () {
        var windowH =  $(window).height();
        $('#main_container, #overlay').height(windowH);
    });
});

css:

body { background-color: #000000; font-family: Arial; font-size: 12px;
       color: #000; margin: 0; padding: 0; overflow: hidden; }
#main_container { float: left; position: relative; width: 100%; height: 100%; 
                  background-color: #000000; }
#video { position: absolute; left: 0px; top: 0px; min-height: 100%;
         min-width: 100%; z-index: 9997; }
#overlay { position: absolute; left: 0px; top: 0px; height: 100%; width: 100%;
           z-index: 9998; }

html:

<div id="main_container">
<div id="overlay"></div>
<video id="video" width="" height="" controls="controls" loop="loop" autoplay="">
 <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
 <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>
</div>

Note: Used overlay div for deactivating controls and you can use whatever content on your video, like in jsFiddle example.

edited Aug 27 '15 at 12:15

Nick

1,417
1
14
21

answered Aug 10 '12 at 14:54

Barlas Apaydin

7,233
11
55
86

Thanks, i'm getting further now. And letting the rectangle with the text dissappear shall i just use a jquery/js command to set the visibility to hidden? or something – jochemke Aug 10 '12 at 15:31
you can manipulate content area with CSS. no need jQuery over there. i used jQuery for setting wrapper's (main_container's) area to prevent css conflict. – Barlas Apaydin Aug 10 '12 at 15:33
I got it too work now :), only issue i have left is that i can't seem to increase the height of the window and content. – jochemke Aug 10 '12 at 15:46
you can change that values from variation. example: var windowH = $(window).height() +10; – Barlas Apaydin Aug 10 '12 at 15:57
It doesn't give the result i want. I want to increase the height of the content part and keep the video on the same spot. as you can see on the image below, the boxes continue under the page however i can't get scrollbars or increase the height http://imageshack.us/photo/my-images/853/94047586.png/ – jochemke Aug 10 '12 at 16:14
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/15184/discussion-between-jochemke-and-barlasapaydin) – jochemke Aug 10 '12 at 16:17
than remove css overflow:hidden; from body. sorry got to go, need to eat something. – Barlas Apaydin Aug 10 '12 at 16:54

score 0 · Answer 2 · answered Aug 10 '12 at 15:00

If you want a script, you can try: https://github.com/sydlawrence/jquery.videoBG

In the documentation here: http://syddev.com/jquery.videoBG/index.html#documentation, there seems to be an auto play option with a Boolean parameter...so I'm guessing just set it to false

autoplay bool

Video as background on a website playing on command

2 Answers2

Linked