我想要一个视频标签来填充 100% 的 div:
a) 它不需要保持比率(否则我们需要使用 overflow:none)；
b) 填充一个div，而不是整个背景；
c) 有责任心会加分。现在只要您对 Angular 线调整窗口大小即可。保持高度并水平调整大小会剪切视频。
我已经尝试了数十种甚至数百种替代方案，并且它们都保持了初始视频比例。
它适用于 fidlle ....可能是因为屏幕小，可能是因为fiddle是更好的浏览器...
<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 时，高度会发生变化并且视频不会完整显示。我想要像 background-size 100% 100% 这样的东西将图像拉伸(stretch)到 div 的末尾，但它不适用于视频。
感谢您提前提出任何建议。
附言。 android 系列好像没有播放视频!
我
最佳答案
使用 object-fit css属性，虽然不支持IE，但是用在<video>上还是挺合理的, <img>标签。
检查 CanIUse用于浏览器支持，以及 CSS-Tricks供使用。
例子:
/** If parent has some defined width/height */
.video-element {
width: 100%;
height: 100%;
object-fit: cover;
}
关于html - 视频标签填充 100% div，无论比例如何，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22874155/