使嵌入的视频 100% 高度和 100% 宽度答案

【问题标题】：Make embedded video 100% height and 100% width使嵌入的视频 100% 高度和 100% 宽度
【发布时间】：2015-12-25 21:37:16
【问题描述】：

我想制作一个 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%。如果我设置了最大高度，那么它将缩小视频的宽度。

有什么建议吗？

【问题讨论】：

标签： css html5-video

【解决方案1】：

这将使您的视频 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);
}

【讨论】：

【解决方案2】：

如果我正确理解您的问题，您是否正在寻找一种方法来拉伸视频以适应屏幕？如果是这样，那么您正在寻找这样的东西：

来源：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;
}

【讨论】：