具有视频高度的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
}

添加显示块以使元素表现为一个块,可以解决您的问题.如果这对您有用,请打勾回答.

在这里,您将找到带有修复 程序演示链接的演示链接