Question

我想要一个视频标签来填充100％的div：

a）它不需要保持比率（否则我们需要使用溢出：无）;

b）填写div，而不是整个背景;

c）负责任是一件好事。现在只要您沿对角线重新调整窗口大小即可。保持高度和水平重新调整尺寸会削减视频。

我已经尝试过几十种，甚至数百种替代品，并且所有这些都保持了初始视频比例。

它适用于fidlle ....也许是因为屏幕很小，可能是因为小提琴是更好的浏览器......

<body>
<div class="wrapper">
    <div class="header">
     .....
    </div>
    <div class="out-video">
        <video autoplay loop poster="mel.jpg" id="bgvid" width="100%" height="100%">
            <source src="http://www.mysite.braaasil.com/video/mel.webm" type="video/webm">
            <source src="http://www.mysite.braaasil.com/video/mel.mp4" type="video/mp4">
        </video>
     </div>
</div>

该网站在这里但是当我尝试解决方案时，它会改变......左右侧边栏是空的。我希望视频能够填满整个宽度。当它覆盖div时，高度变化和视频不会完整显示。我想像背景大小100％100％，将图像拉伸到div的末尾，但它不适用于视频。

提前感谢您的任何建议。

PS。似乎android系列不播放视频！

1

Answer 1

您可以使用this one之类的解决方案。比率不会改变，但你可能会丢失正确的视频部分。

video#bgvid {
    position: absolute;
    z-index: 0;
    background: url(mel.jpg) no-repeat;
    background-size: 100% 100%;
    top: 0px;
    left: 0px; /* fixed to left. Replace it by right if you want.*/
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}

视频将固定在左上角。如果你想改进它，我想你需要一些JavaScript。

修改：

只需找到适合您需求的JQuery解决方案：simulate background-size:cover on <video> or <img>

Demo

Answer 2

使用object-fit css属性，虽然不支持IE，但使用<video>，<img>代码仍然非常合理。

检查CanIUse浏览器支持，CSS-Tricks查看使用情况。

Answer 3

简单的CSS注入

video {
  width: inherit;
  height: inherit;
}

div {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
}

Answer 4

尝试一下

HTML：

config.py

少：

gunicorn -c config.py app:app

无论比率如何，视频标签都可以填充100％div

4 个答案: