Spencer M. Spencer M. - 10 days ago 10
CSS Question

How to make a split screen video with full height?

I would like to achieve this split screen video effect on a webpage I am working on. Here is a picture of the result I have so far

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>NextDoor Pub&amp;Grill</title>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<div class="header__menu full-width">

</div>
</header>
<nav>
<div class="nav flex full-width">
<div class="nav__video flex full-width">
<div id="left">
<div class="nav__video--left" onclick="expandRight()">
<video playsinline autoplay muted loop>
<!--- Inlcude the video files with .webm file first --->
<source src="assets/videoLeft/loop.webm">
<source src="assets/videoLeft/loop.mp4">
<source src="assets/videoLeft/loop.mov">
</video>
</div>
</div>
<div id="right">
<div class="nav__video--right" onclick="expandLeft()">
<video playsinline autoplay muted loop>
<!--- Inlcude the video files with .webm file first --->
<source src="assets/videoRight/loop.webm">
<source src="assets/videoRight/loop.mp4">
<source src="assets/videoRight/loop.mov">
</video>
</div>
</div>
</div>
</div>
</nav>
<script src="js/scripts.js"></script>
</body>
</html>


CSS:

.skin{

}

.full-width{
width: 100%;
}

.flex{
display: -webkit-flex;
display: flex;
}

.nav{
position: absolute;
-webkit-flex-direction: column;
flex-direction: column;
height: 100%;
}

.header__menu{
height: 100px;
background-color: rgba(0,0,255,0.5);
}

.nav__video{
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
height: 100%;
}

#left{
width: 50%;
height: inherit;
object-fit: cover;
}

#right{
width: 50%;
height: inherit;
object-fit: cover;
}

.nav__video--left{

}

.nav__video--right{

}

video{
height: 100%;
width: 100%;
object-fit: contain;
}

}


So, as demonstrated by the code above, the divs that the videos are in are sized to occupy the full height below the top menu bar. However, the videos only display in the upper part of their respective divs. How can I make sure the videos occupy the full white space while retaining the same aspect ratio? (part of each video will be cut off)

Answer

After futzing around with it for a while, this appears to be the correct CSS combination, giving both a cover effect and full height while taking the banner into account.

height: calc(100vh - 100px); gives full height minus header height. The rest is mainly carrying height and width through the whole element tree so that video has the correct dimensions to size against.

Keep in mind that IE doesn't support object-size and, without it, this effect can only be accomplished with the help of javascript.

.full-width{
  width: 100%;
}

.flex{
  display: -webkit-flex;
  display: flex;
}

.nav{
  position: absolute;
  -webkit-flex-direction: column;
  flex-direction: column;
  height: calc(100vh - 100px);
}

.header__menu{
  height: 100px;
  background-color: rgba(0,0,255,0.5);
}

.nav__video{
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  height:100%;

}

#left, #right {
  width: 50%;
  height: 100%;
}

#left{
  background-color: green;
}

#right{
  background-color: yellow;

}

.nav__video--left, .nav__video--right{
  width: 100%;
  height: 100%;
  overflow:hidden;
}

.nav__video--left{
  background-color: blue;
}

.nav__video--right{
  background-color: red;
}

video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
Comments