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

Question

我正在努力处理一个愚蠢的小事情。在这个网站上工作：

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

您将看到的视频是在高度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您的浏览器上全屏显示。通过裁剪，我也懒得缺少一些视频（50像素从底部左右），在全屏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;
}