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;
}

请告诉我这是否对您有所帮助，否则请为您的问题添加更多规格以便更好地了解它。

Html5视频响应部分

1 个答案: