无论比例如何，视频标签都会填充 100% div [英] Video tag to fill 100% div regardless of ratios
问题描述
我想要一个视频标签来填充 100% 的 div:
a) 它不需要保持比率(否则我们需要使用溢出:无)；
b) 填充一个 div，而不是整个背景；
c) 有责任感会更好.现在，只要您对角调整窗口大小即可.保持高度并水平调整大小会剪切视频.
我已经尝试了数十种甚至数百种替代方法，并且所有这些都保持了初始视频比例.
它适用于
I am tying to have a video tag to fill 100% of a div:
a) it doesn't need to keep the ratios(otherwise we need to use the overflow:none);
b) fill a div, not the whole background;
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.
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.
Thank you for any suggestion in advance.
PS. It seems that android family does not play the video!
l
You can use a solution like this one. Ratio dont change, but you may lose 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.
Edit :
Just a find a solution with JQuery who can fit your need : simulate background-size:cover on <video> or <img>
这篇关于无论比例如何，视频标签都会填充 100% div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
