视频标签粘贴问题

时间:2016-02-05 16:00:57

标签: html css video tags

我希望视频标签贴在顶部(或视频标签上方元素的底部)。当使用我正在使用的当前代码调整窗口大小时,视频元素也将从顶部(或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%;
}

那么我该怎样做才能让视频标签不会以令人不快的方式调整大小并仍能正确填充空间呢?

1 个答案:

答案 0 :(得分:0)

您必须为此行添加CSS此视频,图片,iframe等的响应元素

CSS

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