HTML5 video with fixed height but scale width up to 100%
What I want to do is scale the HTML5 video to 100% of the page width, but maintain a fixed height of 650px.
The following code is scaled to maintain an aspect ratio, which is not what I need:
<header>
<video width="100%" autoplay="autoplay">
<source src="video.webm" type="video/webm; codecs=vp8,vorbis">
</video>
</header>
I've tried it too max-height="650px"
, but this only centers the video and leaves spaces on both sides.
source to share
What PayPal does is scale the video to fit the viewport. But they are not mobile, and this is a problem.
So, if you want to scale your video from small to large devices, you can place your video with basic markup:
<video width="100%" height="auto">...
This will enlarge your video. The problem is when you go to the small viewport. The video will shrink but may be too small, so you can define a minimum height and use CSS transforms to increase the video spectrum:
video{
transform: scale(1.5);
-webkit-transform: scale(1.5);
}
With media queries, you can define breakpoints and scale the video for these screens.
Also with some javascript you can also define a focal point for your video (if some area of the video is important).
Check out this link for more details:
http://viget.com/extend/fullscreen-html5-video-with-css-transforms
source to share
I achieved this by wrapping it in two containers with a set height (750px, i.e.), reverse visibility: hidden; and overflow: hidden; - so the video gets bigger but comes down from the bottom (thanks to https://codepen.io/dudleystorey/pen/knqyK and http://fasett.no/ ):
.header {
height:750px;
overflow: hidden;
}
video {
display: block;
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
pointer-events: none;
overflow-y: hidden;
vertical-align: top;
}
.container_video {
-webkit-backface-visibility: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
width: 100%;
height: 100%;
z-index: 1;
position: relative;
}
<header class="header">
<div class="container_video">
<video preload="auto" autoplay loop muted poster="img/videobg.png" id="bgvid" src="//demosthenes.info/assets/videos/polina.mp4" ></video>
</div>
</header>
source to share