Place video with 100% height & 100% width using css or javascript

Question

I want to place a html5 video (with the video tag of course) with 100% width and 100% height which will play in the background. Here is an example with an image and I want exactly the same with a video, I just didn't find out how to do that:

#image {
    background-image: url("image.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}

JSFiddle: http://jsfiddle.net/u9ncpyfu/

Answer 1

If I understand correctly, this should be as simple as setting the min-height and min-width to 100%. So for example:

#video {
    position: fixed;
    left: 0;
    top: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}

This may need to be adjusted for responsiveness.

Check out this jsfiddle.

---

Edit:

If you also want the video to remain centered, then wrap it in a container like so:

#video-wrap {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
#video {
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;   
}

<div id="video-wrap"><video id="video">
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video>
</div>

Here also a jsfiddle.