I have a video, and I want it to FILL 100% of the width, and 100% of the height. And keep the aspect ratio.
Is it possible that it at least fills 100% for both? And if a bit of the video has to be out of the screen to keep the aspect ratio, that doesn't matter.
HTML:
<video preload="auto" class="videot" id="videot" height="100%" preload>
<source src="BESTANDEN/video/tible.mp4" type="video/mp4" >
<object data="BESTANDEN/video/tible.mp4" height="1080">
<param name="wmode" value="transparent">
<param name="autoplay" value="false" >
<param name="loop" value="false" >
</object>
CSS:
.videof, .videot {
width: 100% !important;
height: 100% !important;
}
This question is related to
html
css
html5-video
fullscreen
video {
width: 100% !important;
height: auto !important;
}
Take a look here http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
By checking other answers, I used object-fit in CSS:
video {
object-fit: fill;
}
From MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit):
The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.
Value: fill
The replaced content is sized to fill the element’s content box: the object’s concrete object size is the element’s used width and height.
Easiest & Responsive.
<video src="full.mp4" autoplay muted loop></video>
<style>
video {
height: 100vh;
width: 100%;
object-fit: fill; // use "cover" to avoid distortion
position: absolute;
}
</style>
I use JavaScript and CSS to accomplish this. The JS function needs to be called once on init and on window resize. Just tested in Chrome.
HTML:
<video width="1920" height="1080" controls>
<source src="./assets/video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
JavaScript:
function scaleVideo() {
var vid = document.getElementsByTagName('video')[0];
var w = window.innerWidth;
var h = window.innerHeight;
if (w/16 >= h/9) {
vid.setAttribute('width', w);
vid.setAttribute('height', 'auto');
} else {
vid.setAttribute('width', 'auto');
vid.setAttribute('height', h);
}
}
CSS:
video {
position:absolute;
left:50%;
top:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
Put the video inside a parent div, and set all to 100% width & height with fill of cover. This will ensure the video isn't distorted and ALWAYS fills the div entirely.
.video-wrapper {
width: 100%;
height: 100%;
}
.video-wrapper video {
object-fit: cover;
width: 100%;
height: 100%;
}
use this css for height
height: calc(100vh) !important;
This will make the video to have 100% vertical height available.
This works for me for video in a div container.
.videoContainer _x000D_
{_x000D_
position:absolute;_x000D_
height:100%;_x000D_
width:100%;_x000D_
overflow: hidden;_x000D_
}_x000D_
_x000D_
.videoContainer video _x000D_
{_x000D_
min-width: 100%;_x000D_
min-height: 100%;_x000D_
}Reference: http://www.codesynthesis.co.uk/tutorials/html-5-full-screen-and-responsive-videos
I am new into all of this. Maybe you can just add/change this HTML code. Without need for CSS. It worked for me :)
width="100%" height="height"
If you're looking for the equivalent to background-size: cover for video.
video {
object-fit: cover;
}
This will fill the container without distorting the video.
PS: I'm extending on Leo Yu's answer here.
We tried with the below code & it works on Samsung TV, Chrome, IE11, Safari...
<!DOCTYPE html>
<html>
<head>
<title>Video</title>
<meta charset="utf-8" />
<style type="text/css" >
html,body {
height: 100%;
text-align: center;
margin: 0;
padding:0;
}
video {
width: 100vw; /*100% of horizontal viewport*/
height:100vh; /*100% of vertical viewport*/
}
</style>
</head>
<body>
<video preload="auto" class="videot" id="videot" preload>
<source src="BESTANDEN/video/tible.mp4" type="video/mp4" >
<object data="BESTANDEN/video/tible.mp4" height="1080">
<param name="wmode" value="transparent">
<param name="autoplay" value="false" >
<param name="loop" value="false" >
</object>
</video>
</body>
</html>
This is a great way to make the video fit a banner, you might need to tweak this a little for full screen but should be ok. 100% CSS.
position: absolute;_x000D_
top: 50%;_x000D_
left: 50%;_x000D_
z-index: 1;_x000D_
min-width: 100%;_x000D_
min-height: 100%;_x000D_
width: auto;_x000D_
height: auto;_x000D_
transform: translate(-50%, -50%);<style>_x000D_
.video{position:absolute;top:0;left:0;height:100%;width:100%;object-fit:cover}_x000D_
}_x000D_
</style>_x000D_
<video class= "video""_x000D_
disableremoteplayback=""_x000D_
mqn-lazyimage-video-no-play=""_x000D_
mqn-video-css-triggers="[{"fire_once": true, "classes": [".mqn2-ciu"], "from": 1, "class": "mqn2-grid-1--hero-intro-video-meta-visible"}]"_x000D_
mqn-video-inview-no-reset="" mqn-video-inview-play="" muted="" playsinline="" autoplay>_x000D_
_x000D_
<source src="https://github.com/Slender1808/Web-Adobe-XD/raw/master/Home/0013-0140.mp4" type="video/mp4">_x000D_
_x000D_
</video>Source: Stackoverflow.com