HTML5 視頻元素寬度 70%
[英]HTML5 video element width 70%
問題描述
我希望視頻元素只有屏幕寬度的 70%，但我正在努力保持 100% 的高度縱橫比。 現在我有全寬視頻作為背景。
我正在使用引導程序 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;
}
我想有這樣的結果：
是否可以 ？
1 個解決方案
解決方案1
1 2016-10-03 10:34:55
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，通過設置 min-width:70% 你的視頻只占你視口的 70% :)
如何獲取HTML5視頻元素的寬度？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.