html将高度视频裁剪为高度100vh，将视频裁剪为全屏

Question

我正在为一件愚蠢的小事而苦苦挣扎。正在处理这个site：

（对不起，服务器慢，学校的东西你知道）

您将看到的视频高度为 vh100，这正是我想要的。当我在浏览器的最大高度上播放此视频时，视频的宽度不是全屏的。 我现在的代码：

HTML

<!-- video -->
<video id="moodvideo" autoplay loop>
    <source src="moodvideo.mp4" type='video/mp4'>
</video>

CSS

/* Video */
video {
    height: 100vh;
    width: 100vw;
}

我想要实现的是全屏视频，width 100wh 和 height 100vh。如果height（宽度为 100wh 的视频）比height 100vh 大，我希望将视频裁剪，以便在浏览器的max width 和height 上全屏显示。通过裁剪，我不会错过一些视频（距底部 50px 左右），width 和 height 的全屏对我来说更重要。

现在，在问你们之前，我已经搜索并尝试了很多，比如； vw100/vh100，min-height/width 100，将电影添加到div，div 到100 vh/vw，以及我找到的一些脚本，但没有任何实际作用...

Answer 1

您可以使用 jquery videoBG 插件：http://syddev.com/jquery.videoBG/

或者您可以添加以下代码：https://jsfiddle.net/wcv2ak9p/1/

当浏览器不支持视频时，会显示替代图像。

HTML

<video id="moodvideo" autoplay loop>
    <source src="moodvideo.mp4" type='video/mp4'>
    <img id="alternative" src="alternative.jpg" />
</video>

CSS

#moodvideo, #alternative {
    width: 100vw; /* Could also use width: 100%; */
    height: 100vh;
    object-fit: cover;
    position: fixed; /* Change position to absolute if you don't want it to take up the whole page */
    left: 0px;
    top: 0px;
    z-index: -1;
}