视频标记可填充100％div，无论比率如何 [英] Video tag to fill 100% div regardless of ratios
问题描述
我想要有一个视频标签来填充div的全部：
I am tying to have a video tag to fill 100% of a div:
a）它不需要保持比率（否则我们需要使用overflow：none）;
a) it doesn't need to keep the ratios(otherwise we need to use the overflow:none);
b）填充一个div而不是整个背景;
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.
它可在 fidlle 中使用。 ..可能因为屏幕很小，也许因为小提琴是一个更好的浏览器...
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>
=http://braaasil.com/mysite/indexVideo.html =nofollow>这里，但当我尝试的解决方案，它会改变...有一个右侧和左侧边栏为空。我想要视频填充整个宽度。当它覆盖div，高度变化和视频没有完全显示。我想要的东西像背景大小100％100％，将图像拉伸到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 fill the whole width. When it covers the 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。
推荐答案
您可以使用这一个。
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。
The video will be fix to top left corner. If you want to improve it, I think you will need some JavaScript.
编辑：
只需找到一个可满足您需求的JQuery解决方案： simulation background-size：覆盖< video> 或< img>
Just a find a solution with JQuery who can fit your need : simulate background-size:cover on <video> or <img>
这篇关于视频标记可填充100％div，无论比率如何的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
