flexbox中的HTML5视频高度错误

Posted 2023-03-05

【中文标题】flexbox中的HTML5视频高度错误

【英文标题】：HTML5 video wrong height in flexbox

【发布时间】：2017-11-12 17:20:01

【问题描述】：

在recent website I made 上，我添加了一个视频：

<video autoplay loop muted 
  src="video.mp4">
    Your browser doesn't seem to support videos :(
</video>

此视频位于 display: flex 父级中。 因为我希望它具有响应性，所以我在我的 CSS 中有这个：

video 
    width: 100%;
    height: auto;

这个functions fine in Firefox. 在Chrome, on the other hand 中，似乎发生了以下情况：

元素的宽度按预期设置。 如果元素没有限制其大小，则元素的高度是根据视频的宽度应该是设置的。

我该如何解决这个问题，以便视频尊重<video> 元素的宽度（以响应方式），而高度由视频的纵横比和元素的宽度决定？

.container 
  display: flex;
  flex-wrap: wrap;
  width: 50%;
  border: 2px dotted red;

video 
  width: 100%;
  height: auto;
  flex-shrink: 1;
  border: 2px solid blue;

.content 
  border: 2px solid green;

<div class="container">
  <video autoplay loop muted 
    src="https://birjolaxew.github.io/flippy.js/assets/video/train.mp4">
      Your browser doesn't seem to support videos :(
  </video>
  <div class="content">
    Content below video goes here.
  </div>
</div>

【参考方案1】：

问题似乎是由于 flex。

从.container 中删除display:flex 将修复它。

如果您需要flex，请将flex-direction:column 添加到.container，因为这是您实际使用它的方式。

---

*box-sizing:border-box;
.container 
  display: flex;
  flex-wrap: wrap;
  flex-direction:column;
  width: 50%;
  border: 2px dotted red;

video 
  width: 100%;
  height: auto;
  flex-shrink: 1;
  border: 2px solid blue;

.content 
  border: 2px solid green;

<div class="container">
  <video autoplay loop muted 
    src="https://birjolaxew.github.io/flippy.js/assets/video/train.mp4">
      Your browser doesn't seem to support videos :(
  </video>
  <div class="content">
    Content below video goes here.
  </div>
</div>

【讨论】：

我得出的结论与您的回答相同（尽管没有解决方案）:) 谢谢！