I'm looking to create a video element that is 70% of the screen width, while maintaining a height aspect ratio of 100%. Currently, I have a video background that spans the full width.
Using 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;
}
This is the desired result:
https://i.sstatic.net/vh4WK.jpg
Could this be achieved?