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.