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（整个browswer高度），那么当关系为16：9时，边将从画布上移开。

我建议你使用引导程序的响应视频：

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

让我知道这是否对您有帮助，否则请在您的问题中添加更多说明以更好地理解它。