Html5 视频响应部分

Question

我有一个视频已添加到我网站的主要部分，尺寸为 1920 x 1080，我的问题是如果我将高度设为 100vh，则侧面不是 100% 宽度。

如果我将高度设为：100%，它会超过浏览器的 vh，并且响应速度会很小。

他们在这里制作这个视频的方式是我想要完成的目标

http://www.welcometofillory.com/

.container video {
    height: 100% !important;
    width: 100% !important;
    overflow: hidden;
    }

<div class="container">
<video id="my-video" preload="auto" loop style="width: 1920px; height: 1080px;" width="100%" height="100%">
 <source src="landing-video.mp4" type="video/mp4"></source>
</video>
</div>

Answer 1

发生在您身上的事情是正确的，因为视频总是会按比例放大。如果您将其添加为 100vh（整个浏览器高度），那么由于比例为 16:9，因此两侧将离开画布。

我推荐你使用 bootstrap 的响应式视频：

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe>
</div>

或者只是添加一个不允许视频超出限制的包装器。

.container {
    width:100%;
    height: 100vh;
    overflow: hidden;
}
video{
   height: 100vh;
   width: auto;
}

如果这对您有帮助，请告诉我，否则请在您的问题中添加更多规范以更好地理解它。