我想制作100%高度和100%宽度的视频。我不需要保持宽高比,但如果有一个很小的解决方案,那就太好了。
我找到的最后一个解决方案是:
HTML:
<div class="video">
<video autoplay="" loop="" poster="someimage.pjpg">
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>
</div>
CSS:
.video {
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
}
.video video {
min-width: 100%;
min-height: 100%;
}
此解决方案的问题在于它始终高于100%。如果我设置了最大高度,那么它将缩小视频宽度。
有什么建议吗?
答案 0 :(得分:0)
如果我正确理解您的问题,您是否正在寻找一种方法来拉伸视频以适应屏幕? 如果是这样,那么你正在寻找这样的东西:
来源:http://coding.vdhdesign.co.nz/?p=29
$VideoElement = $(_VideoElement); //Cache Jquery reference of this
var iOriginalVideoHeight = _VideoElement.videoHeight;
var iCurrentVideoHeight = $VideoElement.height();
var iVideoContainerHeight = $VideoElement.parent().height();
var iCurrentScale = iOriginalVideoHeight/iCurrentVideoHeight;
var iScaleY = (iVideoContainerHeight / iOriginalVideoHeight)*iCurrentScale;
//Important to note: Set the origin to the top left corner (0% 0%), or else the position of the video goes astray
$VideoElement.css({
"transform-origin": "0% 0%",
"transform":"scaleY(" + iScaleY +")",
"-ms-transform-origin" : "0% 0% ", /* IE 9 */
"-ms-transform":"scaleY(" + iScaleY +")", /* IE 9 */
"-moz-transform-origin" : "0% 0%", /* Firefox */
"-moz-transform":"scaleY(" + iScaleY +")", /* Firefox */
"-webkit-transform-origin": "0% 0%", /* Safari and Chrome */
"-webkit-transform":"scaleY(" + iScaleY +")", /* Safari and Chrome */
"-o-transform-origin":"0% 0%", /* Opera */
"-o-transform":"scaleY(" + iScaleY +")" /* Opera */
});
如果你要做的是将视频的宽度或高度调整到100%(取决于哪个更大),那么你的CSS应该是这样的:
.video video {
object-fit: cover;
}
答案 1 :(得分:0)
这将使您的视频100%成为视口(屏幕):
.video {
padding: 0;
margin: 0;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: block;
background-color: rgba(0,0,0,.35);
}
.video video {
height: 100vh;
width: 100vw;
}
如果您想保持视频的宽高比,请将最后4行替换为:
.video video {
max-height: 100vh;
max-width: 100vw;
}
如果您希望视频在屏幕中居中,请将以下规则添加到其中:
.video video {
position: relative;
top: 50%;
left: 50%;
-webkit-transform: translate3D(-50%, -50%, 0);
transform: translate3D(-50%, -50%, 0);
}