Force html5 video element to shrink to fit container in chrome

Question

I need to fit videos inside a container, shrink the video if required, I have managed to make it work on FireFox, but I have been unable to shrink the video in chrome.

.media-player video {
  cursor     : pointer;
  max-height : 100%;
  z-index    : 0;
  display    : block;
  margin     : auto;
  max-width  : 100%;
}

in FireFox

in chrome

Notice that video is creaking out of the container, when it should just shrink. How can i force the chrome to respect max-height : 100%; for a video element?

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.video-container {
  position : absolute;
  top      : 0;
  left     : 0;
  right    : 0;
  bottom   : 0;
}

.container{height:300px;}
.col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.col-center {
    align-items: center;
    justify-content: space-around;
}
.box {
  flex: auto;
  min-height: 0;
}

.box-shrink {
  flex: 0 1 auto;
  min-height: 0;
}

.media-player {
  position: relative;
  min-width: 250px;
  margin: auto;
}

video {
  cursor: pointer;
  max-height: 100%;
  z-index: 0;
  display: block;
  margin: auto;
  max-width: 100%;
}

<div class="col box container">
  <div class="media-player video box">
    <div class="col col-center box video-container">
    <video controls poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif">
      <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm">
    </video>
    </div>
  </div>
  <div class="media-player video box">
  <div class="col col-center box video-container">
    <video controls poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif">
      <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm">
    </video>
    </div>
  </div>
  <div class="media-player video box">
  <div class="col col-center box video-container">
    <video controls poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif">
      <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm">
    </video>
    </div>
  </div>

</div>

Run the snipped in chrome and firefox to see the difference.

UPDATE: For now I fixed it with absolute position, updated the snippet. If any one has a better solution ...

What does your markup look like? Is it a `box-sizing` issue? Does it look like this - https://jsfiddle.net/abhitalks/3x6dpf97/ ? — Abhitalks, Mar 04 '17 at 09:02
@Abhitalks no i have the box-sizing, but my container is a flex item `flex: 0 1 auto;`, let me see if i can make a sample — Exlord, Mar 04 '17 at 09:16
Here - https://jsfiddle.net/abhitalks/3x6dpf97/1/ - with flex-items. — Abhitalks, Mar 04 '17 at 09:26
Are you sure the height of container is `300px`? And your `.col` and `.box` class are on the container. `.col` makes it a `flex` container, and `.box` makes it a flex item. Is it wrapped in another container? — Abhitalks, Mar 04 '17 at 09:34
yes this is my exact markup which works as expected in FireFix, now I need to make it work in chrome too. — Exlord, Mar 04 '17 at 09:41
The accepted answer in the duplicate provides four possible solutions to this question. If you don't think this is a duplicate post a comment below. — Michael Benjamin, Mar 04 '17 at 13:00

Abhitalks · Answer 1 · 2017-03-04T10:57:44.023

It seems the primary problem is with the height on your video wrapper i.e. the .media-player (.box-shrink) divs.

The video element is set for a max- size in %. So it needs a reference height/width to contain its max- properties within. The parent div doesn't have a height set and hence the reference is absent. The flex-basis is not effecting the application of reference (how it is effecting in Firefox seems to be a bug).

From the reference here: https://www.w3.org/TR/css-flexbox-1/#flex-property, for the flex-basis value of auto, it says:

When specified on a flex item, the auto keyword retrieves the value of the main size property as the used flex-basis. If that value is itself auto, then the used value is content.

Chrome seems to be honouring that spec. In absence of height on the wrapping div, the flex-basis of auto should be taking content's size, which is the default size of the video. Note that max- size should anyway not work without a proper size on the parent. Using an absolute value for flex-basis will not help in your case, because you have set the flex-grow to 0, and flex-basis will only mean the starting size and not the main size of the element.

Also, note that you have set a min-width of 250px on the wrappers. As long as the video fits within that width (based on the outer container size and flex thing-a-magic) then its okay. Otherwise, that would also need to be looked into.

Workaround

Provide a minimum possible size to your wrapper div. If your outer container is too small, use a small size for your inner wrappers.

See the example here: https://jsfiddle.net/abhitalks/Lzneg58y/

I've tested it working in Chrome, FireFox, and Edge.

In this example, I've set a size of 32px just so that it can be demonstrated. And I used a height of 80vh on the container isntead of 300px so that it is easier for you to resize and see the effect.

And then, set the flex-grow so that the wrapper can grow when it gets more space in the container.

Snippet:

* { box-sizing: border-box; margin: 0; padding: 0; }
.container { height: 80vh; width: 80vw; margin: 8px; border: 2px solid #000; }
.col { display: flex; flex-direction: column; justify-content: space-between; }
.box { flex-basis: auto; }

.box-shrink { 
 flex: 1 1 auto; height: 32px; margin: 4px;
 border: 2px solid #00f; 
}
video { 
 max-height: 100%; max-width: 100%; 
 display: block; margin: 0px auto; border: 2px solid #f00; 
}

<div class="col box container">
 <div class="media-player video box-shrink">
  <video controls>
    <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm">
  </video>
 </div>
 <div class="media-player video box-shrink">
  <video controls>
    <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm">
  </video>
 </div>
 <div class="media-player video box-shrink">
  <video controls>
    <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm">
  </video>
 </div>
</div>

The problem is that the height need to be dynamic and i cannot set the height of the container. I ended up using a absolute position element, its a fix for now and its working. — Exlord, Mar 04 '17 at 12:30

Force html5 video element to shrink to fit container in chrome

1 Answers1