HTML5视频元素宽度70％

我希望视频元素只有70％的屏幕宽度，但我正努力将高度宽高比保持为100％。现在我有全宽视频作为背景。HTML5视频元素宽度70％

我正在使用bootstrap v4。

<body> 
<video poster="assets/img/gpd.jpg" id="bgvid" playsinline autoplay muted loop> 
<source src="assets/video/gpd_video.webm" type="video/webm"> 
</video> 
<div class="site-wrapper"> 
<div class="site-wrapper-inner"> 
    <div class="cover-container"> 
    <div class="masthead clearfix"> 
     <div class="inner"> 
     <h3 class="masthead-brand">Cover</h3> 
     <nav class="nav nav-masthead"> 
      <a class="nav-link active" href="#">Home</a> 
      <a class="nav-link" href="#">Features</a> 
      <a class="nav-link" href="#">Contact</a> 
     </nav> 
     </div> 
    </div> 
    <div class="mastfoot"> 
     <div class="inner"> 
     <p></p> 
     </div> 
    </div> 
    </div> 
</div> 
</div> 
</body>

CSS：

video { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    transform: translateX(-50%) translateY(-50%); 
    background-size: cover; 
    transition: 1s opacity; 
}

我想有这样的结果：

这可能吗？

来源

2016-10-03 user3540118

如果没有父母与特定的身高，然后最小高度：100％不会工作。尝试设置最小高度：200px – ThunD3eR

为什么不使用最大宽度。设置最大宽度：70vw。 –

它更接近我想要的最大宽度：70vw，但视频仍然没有填满整个区域 – user3540118

video { 
    position: fixed; 
    top: 50%; 
    left: 50%;

最小宽度：70％;

min-height: 100%; 
    width: auto; 
    height: auto; 
    transform: translateX(-50%) translateY(-50%); 
    background-size: cover; 
    transition: 1s opacity; 
}

//我会建议你使用这个CSS，通过设置最小宽度：70％的视频只拿70％的视口:)

来源

2016-10-03 10:34:55

HTML5视频元素宽度70％

回答

相关问题