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％

回答

相關問題