Scale video to fit inside flexbox item while keeping aspect ratio

Question

I am trying to use flexbox to layout my website. The site has a video on the top of the screen and scrollable div below it. Each flex-item should use 50% of the height of the screen.

The video should maintain it's aspect ratio when the screen is resized. The width should not exceed the width of the screen and the height should not exceed 50% of the height of the screen.

Right now when the screen is narrow the video scales correctly to fit the width:

When the screen is widen the video's height extends past the height of the parent div and the controls appear above the scrollable div.

How can I ensure that the video will never exceed the height or width of the flex-item while maintaining the aspect ratio? The one requirement I have is that I must nest the video element in the flex-item (I can't use the video element as the flex-item). Also, ideally, the video should be centered vertically and horizontally.

html,
body {
  height: 100%;
}
video {
  width: 100%;
  height: auto;
}
.flex-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.flex-item {
  padding: 1em;
  width: 100%;
  flex-basis: 50%;
}
.video-content {
  background-color: #ccffcc;
}
.scrollable-content {
  overflow-y: auto;
  background-color: #ffcccc;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="flex-container">
  <div class="flex-item video-content">
    <video src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" controls></video>
  </div>
  <div class="flex-item scrollable-content">
    Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
  </div>
</div>

Answer 1

As Flexbox continues to evolve, adding some CCS that worked for me - this allows multiple videos in a row and maintains the aspect ratio when the browser is resized.

.video-layout {
  width: 40%;
  aspect-ratio: 16/9;
  background: #45A29E;
  border:1px solid black;
  color: black;
}

.video-tile {
    height: 100%;
    width: 100%;
}

.container-layout-row {
  width: 100%;
  display: flex; /* or inline-flex */
  flex-direction: row;
  justify-content: center;
  //background-color: orange;
}

<div class="container-layout-row"> 
  <div class="video-layout">
     <video controls class="video-tile">
       <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4"/>
              Your browser does not support the video tag.
      </video>
  </div>
    <div class="video-layout">
     <video controls class="video-tile">
       <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4"/>
              Your browser does not support the video tag.
      </video>
  </div>
</div>

Answer 2

Ok so first, the flex property you have it on 100%, so whenever the size of the window change the flex container and the video will scale to that window capacity.

I believe that if you apply an helper class from bootstrap4

(Here is the cdn: https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css ) This should fix the problem. Add this class to the container of the video:

class="embed-responsive embed-responsive-16by9"

And to the video tag add this class:

class ="embed-responsive-item"

Should look like this:

        <div class="flex-item video-content embed-responsive embed-responsive-16by9">
     <video src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" class ="embed-responsive-item" controls></video>

Hope works for you :)

Answer 3

I found a solution that works for me. I added position: relative; to .video-content made video absolute positioned with 100% height and width:

video {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

https://jsfiddle.net/beeps10/0hxze25p/

Answer 4

html

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="flex-container">
  <div class="flex-item video-content">
    <video src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" controls></video>
  </div>
  <div class="flex-item scrollable-content">
    <h1>Scroll content</h1>
    <p>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
    <br>Scroll content
      <br>Scroll content</p>
  </div>
</div>

css

html,
body {
  height: 100vh;
}
video {
  flex:0 1 100%;
  object-fit: fill; /* over-ride "object-fit: contain" only for webkit as it doesn't honour the ratio */
}
.flex-container {
  height: 100vh;
  display: flex;
  flex-direction:column;
  justify-content:flex-start;
}
.flex-item {
  padding: 1em;
  box-sizing:border-box;
  height:auto;
}
.video-content {
  background-color: #ccffcc;
  flex:0 1 100%;
  height:50%;
  display:flex;
  justify-content:flex-start;
}
.scrollable-content {
  flex:0 0 100%;
  overflow-y: scroll;
  min-height:50vh;
  background-color: #ffcccc;
}

http://codepen.io/anon/pen/wMrYOK

https://css-tricks.com/almanac/properties/o/object-fit/

https://css-tricks.com/snippets/css/a-guide-to-flexbox/