8

As the title states, if I wrap <video>'s in a <div> container (to further add an overlay), which is set to relative; inline-block; height:100%; while <video>'s size is height:100%; width:auto It's all nice on initial page rendering, but as soon as you resize the page the videos shrink/grow, but the container's width remains the same.

Here is a codepen for you: http://codepen.io/MaxYari/pen/PqeOQY
Just try to change height of the window and see what I mean.

In another words - I want to make a container that will wrap around the <video> tag, which preserves its aspect ratio by its nature.
This div-video construct must fit into a bigger container-list.
Fit by the bigger side, depending on container-list orientation. i.e height: 100% for horizontal.
Separate CSS surely can be made for different orientations, therefore I just want to solve one case, presuming that it will solve both.

Edit: Updated Pen and added a border to video wrapper to illustrate it's nonwrappiness better.

Max Yari
  • 3,617
  • 5
  • 32
  • 56
  • Unless width is specified to be a percentage value it will not change when you resize the document/window, I'm talking about your containers of course. – slash197 Jul 12 '15 at 11:37
  • @slash197 but it's wrapped around element that IS resizing on window resize. Looks like a unexpected behaviour, no? Anyway, workarounds? To have a warapper around ` – Max Yari Jul 12 '15 at 11:42
  • Here's an example with percentage, works as expected http://jsfiddle.net/slash197/p9Lm2hde/. It's not unexpected at all, when the dom loads/renders all elements have fixed value sizes and they don't adjust to window resizing (doesn't matter what properties their child elements have) unless it is a percentage. – slash197 Jul 12 '15 at 11:46
  • @slash197 surely it works, but i can't set it as a width percentage. Im anchoring to height percentage instead (30% in my fiddle) and want a horizontal list of videos inside to fit it and to resize properly – Max Yari Jul 12 '15 at 12:00
  • WHOA, i though that question going to die, will check out answers... – Max Yari Jul 14 '15 at 12:44

3 Answers3

2

In Firefox it looks like you could just change display: inline-block; to display: inline-flex; like so:

Example - Does NOT work in Google Chrome; For multibrowser solution with some JavaScript look down below

body,
html {
  height: 100%;
}
#videos {
  position: relative;
  height: 30%;
  background-color: rgba(0, 0, 0, 0.8);
}
.video_wrapper {
  height: 100%;
  display: inline-flex; /* see change here */
}
.video {
  height: 100%;
  width: auto;
}
<div id="videos">
  <div class="video_wrapper">
    <video class="video" autoplay src="http://techslides.com/demos/sample-videos/small.mp4"></video>
  </div>
  <div class="video_wrapper">
    <video class="video" autoplay src="http://techslides.com/demos/sample-videos/small.mp4"></video>
  </div>
</div>

MDN Documentation

Can I use compatibility table

It looks like the only way to get it to work in Chrome is to force a repaint when the window is resized:

Working Example

$(window).resize(function () {
    $('.video_wrapper').hide().show(0);
});

Chrome seems to have issues with fluid video, looks like it has something to do with the object-fit property, fortunately you can work around it with the method above.

Community
  • 1
  • 1
apaul
  • 16,092
  • 8
  • 47
  • 82
  • Resized height - same behaviour, videos are shrinked, but red border is not wraping around them, but rather maintaining the previous width – Max Yari Jul 14 '15 at 12:47
  • @MaxYari what browser were you testing with? – apaul Jul 14 '15 at 13:49
  • latest Google Chrome. Im shrinking `window`'s height, `video`'s height getting smaller alongside with horizontal container, but wrappers around them remain same width with video centered inside. – Max Yari Jul 14 '15 at 19:11
  • @MaxYari I think I may have it now. – apaul Jul 14 '15 at 23:04
  • @MaxYari It looks like that image is from the inline-flex fiddle, try the second one: http://jsfiddle.net/apaul34208/hzhnq3LL/9/ – apaul Jul 15 '15 at 15:04
  • 1
    Wait am i getting this right, you are just forcing css to recalculate by using hide-show on elements onresize, i'm not missing anything? I thought about triggering recalculations via affecting styles from js, but never tryed it. Just noticed updated part of question... Anyway, that's just beautiful, hackish, yeah, yet beautiful. Thanks for your time and efforts, great answer ;) May i suggest, edit you post in the way so top fiddle link will not catch the eye of the reader as working one (due to the fact that it's not). – Max Yari Jul 15 '15 at 16:49
  • @MaxYari Thanks. I know it isn't optimal, hopefully Chrome will reconsider the way it renders videos in future versions. – apaul Jul 15 '15 at 16:51
  • Two years later and I still have the same bug in Chrome, while in FF and Safari works like a charm. For a comprehensive list of what might trigger reflows, this is an interesting read: https://gist.github.com/paulirish/5d52fb081b3570c81e3a – DaJackal Apr 19 '17 at 12:40
1

You have not specified any width in the video wrapper

.video_wrapper {
  height: 100%;
  display: inline-block;
}

Add a percentage width like this:

.video_wrapper {
  width: 100%;
  height: 100%;
  display: inline-block;
}
ThemesCreator
  • 1,749
  • 6
  • 27
  • 49
  • And i don't want to, let's assume, that those videos can be any aspect ratio, therefore width is unknown, yet height must fit container with height:100% – Max Yari Jul 14 '15 at 12:48
0

Actually just setting the .video wrapper isn't going to keep in it's container.

you're going to have to set a min-width for the body, html selectors. Use a fluid body width is what's causing to escape it's container.

so the new css would look like

body,html {
  height: 100%;
  min-width: 1024px;
}
#videos {
  position: relative;
  height: 30%;
  background-color: rgba(0,0,0,0.8);  
}
.video_wrapper {
  height: 100%;
  display: inline-block;
}
.video {
  height: 100%;
  width: auto;
}
Nalani
  • 387
  • 3
  • 13
  • Maybe there is some magic behind it, but it seems, that you are trying to fix overflowing of #videos container, by setting `min-width` (that issue also can be fixed width no-wrap and horizontal scroll). It's not a subjecto of the question here, i'm talking about the fact, that when you shrink window's height `.video_wrapper`s remain the same width, but `video` itself shrinks; while i need `.video_wrapper` to shrink with the `video`. – Max Yari Jul 14 '15 at 12:59