视频标签粘贴问题

Question

我希望视频标签贴在顶部（或视频标签上方元素的底部）。当使用我正在使用的当前代码调整窗口大小时，视频元素也将从顶部（或 HTML 层次结构中的上方元素的底部）移除自身。有没有办法防止视频从顶部松动？我认为这是因为视频标签试图保持其比例，并且可能与宽度有关：100%。

我创建了JSFiddle here，这是我的代码：

HTML：

<div class="background-video">
  <video autoplay loop muted>
    <source src="somevideo.mp4" type="video/mp4">
  </video>
</div>

CSS：

.background-video
{
    position: relative;
}

.background-video video
{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    height: 1080px;
    width: 100%;
}

那么我该如何做才能使视频标签不会以令人不快的方式调整大小并仍然正确填充空间？

Answer 1

您必须为视频、图像、iframe 等响应式元素添加这一行的 CSS。

CSS

audio, iframe, img, video { 
max-width: 100%; 
}