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和{{1}上进行全屏观看你的浏览器。通过裁剪，我不打算错过一些视频（从底部开始50px左右），height中的全屏和width对我来说更重要。

现在，我已经搜索并尝试了很多，然后问你们，像这样的事情; height，vw100/vh100，将电影添加到min-height/width 100，div添加到div，以及我发现的一些脚本，但没有真正有效......

Answer 1

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

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

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

<强> HTML

mpl.ticker.FuncFormatter.__setattr__('set_scientific',False)

<强> CSS

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

html庄稼高度视频到高度100vh，视频到全屏

1 个答案: