CODEWITHSUNDEEP
javascriptcsshtml
Luca Steeb
Luca Steeb

Reputation: 1849

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

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/

Upvotes: 9

Views: 22048

Answers (4)

pschueller
pschueller

Reputation: 4427

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.

Upvotes: 6

ala_747
ala_747

Reputation: 611

You may try:

header {
    position: relative;
    background-size: cover;
    background-position: 50% 50%;
    height: 100vh;
    z-index: 0;
}
header h1 {
    text-align: center;
    font: 3em/1.4 helvetica neue, helvetica, arial, sans-serif;
    color: #fff
}
header video {
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
}
<header>
    <h1>Sample Title</h1>
	<video autoplay loop class="bg-video">
		<source src="https://d2v9y0dukr6mq2.cloudfront.net/video/preview/abstract-rainbow_wjpctkdes__PM.mp4" type="video/mp4">
	</video>
</header>

It will keep the aspect ratio and the video centered while always fully covering the container.

Here's a fiddle working example.

Hope it helps :)

Upvotes: 19

Ian Hazzard
Ian Hazzard

Reputation: 7771

Easy if you give the HTML and BODY a height of 100%.

WORKING JSFIDDLE DEMO

html,
body {
  height: 100%;
  overflow: hidden;
}
* {
  margin: 0;
  padding: 0;
}
video {
  height: 100%;
  width: 100%;
}
<video controls>
  <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>

Upvotes: 0

kellanburket
kellanburket

Reputation: 12843

Set 

 top: 0;
 left: 0;
 right: 0;
 bottom: 0;

You can forget about height: 100%, it only stretches to contain 100% of a div's interior content.

Upvotes: 2

Related Questions