具有视频高度的Div容器

Question

我有这个样本：

Codepen

.container-video{
  background:red;
  max-width:500px;
}
video{
  width:100%;
}

    <div class="container-video">
      <video autoplay muted loop playsinline poster="https://media.giphy.com/media/5CIRqPOk0141W/giphy.gif">
      <source src="https://multicdn.synq.fm/projects/bb/56/bb56f28429b942c08dc5128e4b7ba48c/derivatives/videos/71/43/71439ccd73c74ecc8bbab7abd3bb98bc/mp4_1080/71439ccd73c74ecc8bbab7abd3bb98bc_mp4_1080.mp4" type="video/mp4" />
      <source src="https://multicdn.synq.fm/projects/bb/56/bb56f28429b942c08dc5128e4b7ba48c/derivatives/videos/71/43/71439ccd73c74ecc8bbab7abd3bb98bc/webm_720/71439ccd73c74ecc8bbab7abd3bb98bc_webm_720.webm" type="video/webm" />
      </video>
    </div>  

问题发生在"container-video"的高度。 请看下面的图片，准确了解问题所在

你可以帮我解决这个问题吗？谢谢

Answer 1

请添加以下代码，以便它可以根据需要使用。

video{
  width:100%;
  display: block
}

在元素的显示块中添加行为块，以解决问题。如果这对您有用，请打勾回答。

在这里，您将找到修复程序的演示链接 fix demo link

Answer 2

请将您的css更新为：

.container-video{
  background:red;
  max-width:500px;
}
video{
  width:100%;
  display: block;
}

视频默认显示为：inline。通过将其更改为阻止将强制它尊重高度。

Answer 3

您可以line-height:1px;使用.container-video，如下所示：

.container-video{
  background:red;
  max-width:500px;
  line-height: 1px;
}
video{
  width:100%;
}

<div class="container-video">
  <video autoplay muted loop playsinline poster="https://media.giphy.com/media/5CIRqPOk0141W/giphy.gif">
  <source src="https://multicdn.synq.fm/projects/bb/56/bb56f28429b942c08dc5128e4b7ba48c/derivatives/videos/71/43/71439ccd73c74ecc8bbab7abd3bb98bc/mp4_1080/71439ccd73c74ecc8bbab7abd3bb98bc_mp4_1080.mp4" type="video/mp4" />
  <source src="https://multicdn.synq.fm/projects/bb/56/bb56f28429b942c08dc5128e4b7ba48c/derivatives/videos/71/43/71439ccd73c74ecc8bbab7abd3bb98bc/webm_720/71439ccd73c74ecc8bbab7abd3bb98bc_webm_720.webm" type="video/webm" />
  </video>
</div>