How do i make an HTML5 video the height of the viewport?

HTML & CSS
1

I have a background video, (code below) that is way too tall. how can I cut off the edges dynamically so that the video is only the height of the viewport? Javascript/jQuery is fine.

here’s the code:

<div class="row parent-container">
		<div class="w100 video-container">
			<video autoplay loop muted width="100%">
				<source id="mp4" src="premiere/IMG_1956.mp4" type="video/mp4">
				<source id="jpg" src="images/IMG_0386.JPG" type="photo/jpg">
			</video>
		</div>
		<div class="welcome">
			<h1>
				We strive to use all natural, organic, and local ingredients wherever we can.<br>
				We hope to leave the smallest ecological footprint possible.<br>
				As the science of sustainability advances, we will continue to move in the same direction.<br>
				Join us!
			</h1>
		</div>
	</div>

.row {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

.w100 {
	width: 100%;
}

.parent-container {
	position: relative;
}

.video-container {
	z-index: -1;
}

.welcome {
	position: absolute;
	display: table-cell;
    vertical-align:middle;
    text-align:center;
}
2

Hi, the technique you need is explained in detail here.

Something like this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
	margin:0;
	padding:0;
}
.video-container video {
	position: fixed;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	transform: translateX(-50%) translateY(-50%);
}
.welcome {
	display: flex;
	min-height:100vh;
	justify-content:center;
	align-items:center;
	text-align:center;
}
</style>
</head>

<body>
<div class="video-container">
  <video autoplay loop muted>
    <source id="mp4" src="premiere/IMG_1956.mp4" type="video/mp4">
    <source id="jpg" src="images/IMG_0386.JPG" type="photo/jpg">
  </video>
</div>
<div class="welcome">
  <h1> We strive to use all natural, organic, and local ingredients wherever we can.<br>
    We hope to leave the smallest ecological footprint possible.<br>
    As the science of sustainability advances, we will continue to move in the same direction.<br>
    Join us! </h1>
</div>
</body>

If you have trouble implementing it then post back with the code you have tried.

1 Like
3

so I got it to be the right height, but now the rest of the content is ignoring the section’s existence. Here’s the code:

<div class="row parent-container">
		<div class="w100 video-container">
			<video autoplay poster="images/IMG_0386.JPG" loop muted width="100%" id="bkvid">
				<source id="mp4" src="premiere/IMG_1956.mp4" type="video/mp4">
			</video>
		</div>
		<div class="welcome">
			<h1>
				We strive to use all natural, organic, and local ingredients wherever we can.<br>
				We hope to leave the smallest ecological footprint possible.<br>
				As the science of sustainability advances, we will continue to move in the same direction.<br>
				Join us!
			</h1>
		</div>
	</div>

.parent-container {
	position: relative;
}

.video-container video {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	transform: translateX(-50%) translateY(-50%);
}
4

I gave you a full working example even though you may have a different use so it should have shown how to do it.

You don’t seem to have applied any styles to the welocome div so that it matches the height of the positioned video.

If I understand correctly then you want the text centred on the video which means the text needs to be in the flow and match the image height.

If this is not the case then we’d need clarification of the problem and issues etc.

Using your html it would be done like this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
	margin:0;
	padding:0;
	height:100%
}
.parent-container {
	position: relative;
	min-height:100%;
	overflow:hidden;
}
.video-container video {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	transform: translateX(-50%) translateY(-50%);
}
.welcome {
	display: flex;
	min-height:100vh;
	justify-content:center;
	align-items:center;
	text-align:center;
}
</style>
</head>

<body>
<div class="row parent-container">
  <div class="w100 video-container">
    <video autoplay poster="images/IMG_0386.JPG" loop muted width="100%" id="bkvid">
      <source id="mp4" src="premiere/IMG_1956.mp4" type="video/mp4">
    </video>
  </div>
  <div class="welcome">
    <h1> We strive to use all natural, organic, and local ingredients wherever we can.<br>
      We hope to leave the smallest ecological footprint possible.<br>
      As the science of sustainability advances, we will continue to move in the same direction.<br>
      Join us! </h1>
  </div>
</div>
<p>following content</p>
<p>following content</p>
<p>following content</p>
<p>following content</p>
<p>following content</p>
<p>following content</p>
<p>following content</p>
</body>
</html>

Assuming that you wanted more content below the fold that could be reached by scrolling.

1 Like
6

this is perfect, thanks! Just to clarify, is it the min-height: 100vh; style on the text and the overflow: hidden; on the parent container that is making it the right height?

7

The vh unit relates to the viewport height and 100vh is 100% of the viewport height and makes the element that tall.

The overflow:hidden clips the video so that a horizontal scrollbar doesn’t appear.

The meat of the technique is as explained in the article I linked to and contained in this code:


.video-container video {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	transform: translateX(-50%) translateY(-50%);
}

The video’s minimum width is set to 100% and its minimum height is also set to 100%. As the width and height of the video are auto that will allow the actual width and height to maintain their aspect ratio. This means the video will actually be much bigger than the area it occupies unless it was actually square and the viewport was square.

The video would not be centred so we move its top left position absolutely to the centre and then use transform translate to drag the middle point into the exact middle. The overflow on the parent stops the video peeking out of the container because now only the central part will be viewable.

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.