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

HTML & CSS
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