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 和 [=15= 上全屏显示] 你的浏览器。通过裁剪，我不必担心会丢失一些视频（距离底部大约 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;
}

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

html crops height video to height 100vh, video to fullscreen

html

css

video

html5-video