强制html5视频元素收缩以适应铬容器

Question

我需要在一个容器内安装视频，如果需要的话缩小视频，我已经设法使它在FireFox上工作，但是我无法用铬缩小视频。

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

在FireFox中

​

铬

​

请注意，视频正在从容器中嘎吱作响，而此时它应该缩小。我怎样才能强迫铬尊重max-height : 100%;的视频元素？

​

* {
  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>

​

运行chrome和firefox中的代码片段，查看两者之间的差异。

更新:现在我用绝对位置修正了它，更新了片段。如果有人有更好的解决方案..。

Answer 1

似乎主要的问题在于视频包装上的height，即.media-player (.box-shrink) div。

video元素设置为以%表示的max-大小。因此，它需要一个引用高度/宽度来在其中包含它的max-属性。父div没有高度设置，因此没有引用。flex-basis并没有影响引用的应用程序(它在火狐中的影响似乎是一个bug)。

在这里引用：https://www.w3.org/TR/css-flexbox-1/#flex-property，对于auto的flex-basis值，它说：

当在flex项上指定时，auto关键字将检索main size属性的值作为使用的flex-basis。如果这个值本身是自动的，那么使用的值就是内容。

Chrome似乎是在遵守这个规范。如果包装height上没有div，则flex-basis of auto应该使用内容的大小，这是视频的默认大小。请注意，如果没有父级的适当大小，max-大小无论如何都不能工作。对flex-basis使用绝对值无助于您的情况，因为您已经将flex-grow设置为0，而flex-basis只意味着元素的起始大小，而不是主大小。

另外，请注意，您已经在包装器上设置了一个min-width of 250px。只要视频符合这个宽度(基于外部容器的大小和灵活的东西-一个魔术)，那么它就可以了。否则，也需要对此进行调查。

解决方案

向包装器div提供尽可能小的大小。如果外部container太小，使用小尺寸的内包装。

参见这里的示例：https://jsfiddle.net/abhitalks/Lzneg58y/

我已经测试过它在Chrome、FireFox和Edge中的工作情况。

在本例中，我设置了32px的大小，以便于演示。我在容器isntead上使用了80vh的高度，这样您就可以更容易地调整大小并看到效果。

然后，设置flex-grow，以便包装器在容器中获得更多空间时能够增长。

片段：

​

* { 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>

​