Question

我需要在容器内放置视频，如果需要缩小视频，我设法让它在FireFox上运行，但我无法缩小Chrome中的视频。

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

在FireFox中

在铬中

请注意，当视频缩小时，视频会从容器中吱吱作响。如何强制chrome尊重视频元素的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中运行snipped以查看差异。

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

Answer 1

主要问题似乎是视频包装上的height，即.media-player（.box-shrink）div。

video元素在max-中设置为%大小。因此它需要一个参考高度/宽度来包含其max-属性。父div没有设置高度，因此没有参考。 flex-basis不会影响引用的应用（它在Firefox中的效果似乎是一个错误）。

来自此处的引用：https://www.w3.org/TR/css-flexbox-1/#flex-property，对于flex-basis的{{1}}值，它说：

在弹性项目上指定时，auto关键字将检索值作为使用的弹性基础的主要大小属性。如果该值本身 auto，那么使用的值就是内容。

Chrome似乎很尊重这一规格。在包裹auto时没有height，div的{{1}}应该采用内容的大小，这是视频的默认大小。请注意，flex-basis大小无论如何都不能在父级没有适当大小的情况下工作。使用auto的绝对值对您的情况没有帮助，因为您已将max-设置为0，而flex-basis仅表示元素的起始大小而不是主要大小

另外，请注意您在包装器上设置了flex-grow flex-basis。只要视频适合该宽度（基于外部容器大小和灵活的东西 - 魔术），那么它没关系。否则，还需要对此进行研究。

解决方法

为您的包装min-width提供尽可能小的尺寸。如果您的外部250px太小，请使用小尺寸的内包装。

请参阅此处的示例：https://jsfiddle.net/abhitalks/Lzneg58y/

我已经在Chrome，FireFox和Edge中测试了它。

在此示例中，我已将div的大小设置为可以进行演示。我在容器上使用container的高度而不是32px，这样您就可以更轻松地调整大小并查看效果。

然后，设置80vh以便包装器在容器中获得更多空间时可以增长。

段：

＆＃13;
＆＃13;
300px
＆＃13;
flex-grow
＆＃13;
＆＃13;
＆＃13;

强制html5视频元素缩小以适应chrome

1 个答案: