Html 无论比例如何，视频标签都会填充 100% div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22874155/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Video tag to fill 100% div regardless of ratios
提问by user2060451
I am tying to have a video tag to fill 100% of a div:
我希望有一个视频标签来填充 100% 的 div：
a) it doesn't need to keep the ratios(otherwise we need to use the overflow:none);
a）它不需要保持比率（否则我们需要使用溢出：无）；
b) fill a div, not the whole background;
b) 填充一个 div，而不是整个背景；
c) it would be a plus to be responsible. Now it is as long as you re-size window diagonally. Keeping height and re-sizing horizontally cuts the video.
c) 有责任心是加分项。现在只要您对角地重新调整窗口大小即可。保持高度并水平调整大小会剪切视频。
I have tried dozens if not hundreds of alternative, and all of them keep the initial video ratio.
我已经尝试了数十种甚至数百种替代方法，并且它们都保持了初始视频比例。
it works in the fidlle.... maybe because the screen is small, maybe because fiddle is a better browser...
它适用于小提琴......也许是因为屏幕小，也许是因为小提琴是一个更好的浏览器......
<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>
The site is here but as I try the solutions, it will change... There is a right and left sidebar empty. I would like the video to fill the whole width. When it covers the div, the height change and the video does not show in full. I would like something like the background-size 100% 100% that stretches the images to the end of the div, but it does not work for video.
该站点在这里，但当我尝试解决方案时，它会改变... 左右边栏是空的。我希望视频填满整个宽度。当它覆盖 div 时，高度发生变化，视频无法完整显示。我想要像 background-size 100% 100% 这样的东西，它将图像拉伸到 div 的末尾，但它不适用于视频。
Thank you for any suggestion in advance.
提前感谢您的任何建议。
PS. It seems that android family does not play the video!
附注。看来android全家不播放视频了！
l
升
回答by aloisdg moving to codidact.com
You can use a solution like this one. Ratio dont change, but you can lost the right part of the video.
你可以使用像一个解决方案这一个。比例不会改变，但您可能会丢失视频的正确部分。
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;
}
The video will be fix to top left corner. If you want to improve it, I think you will need some JavaScript.
视频将固定在左上角。如果你想改进它，我认为你需要一些 JavaScript。
Edit :
编辑 ：
Just a find a solution with JQuery who can fit your need : simulate background-size:cover on <video>or <img>
只需找到一个可以满足您需求的 JQuery 解决方案：模拟背景尺寸：覆盖<video>或<img>
回答by Subroto
Use object-fitcss property, though there is no support for IE, but it's still quite reasonable to be used for <video>, <img>tags.
使用object-fitcss属性，虽然不支持IE，但是用于<video>,<img>标签还是比较合理的。
Check CanIUsefor Browser Support, and CSS-Tricksfor usage.
检查CanIUse的浏览器支持和CSS-Tricks的用法。
回答by Ali Kleit
Try this
尝试这个
HTML:
HTML：
<div id="MainBanner">
<video autoplay muted loop>
<source src="something-nice.mp4" type="video/mp4">
</video>
<div class="content">
<h1>Heading</h1>
<p>Some Content</p>
</div>
</div>
Less:
较少的：
#MainBanner {
position: relative;
height: 100vh;
overflow: hidden;
video {
background: url(cover.jpg) no-repeat;
top: 0px;
left: 0px;
min-width: 100%;
min-height: 100%;
}
.content {
position: absolute;
padding: 20px;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
}
}
