Make video fit 100% with any screen resolution
Found a good solution here: http://codepen.io/shshaw/pen/OVGWLG
So your CSS would be:
.video-container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.video-container video {
/* Make video to at least 100% wide and tall */
min-width: 100%;
min-height: 100%;
/* Setting width & height to auto prevents the browser from stretching or squishing the video */
width: auto;
height: auto;
/* Center the video */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
HTML:
<div class="video-container">
<video>
<source src="~/Videos/myvideo.mp4" type="video/mp4" />
</video>
</div>
how to make video fit to screen
This solution should work for you:
https://jsfiddle.net/Garconis/6mscbLer/
HTML:
<div class="wrapper">
<video src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28831/Typer.mp4" autoplay loop></video>
</div>
CSS:
.wrapper {
width:100%;
height:100vh;
overflow: hidden;
background-image: url(http://www.webestools.com/page/media/videoTag/BigBuckBunny.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.wrapper video {
object-fit: cover;
width:100%;
height:100%;
}
HTML5 video fit the user's screen 100%
I will suggest you to control this using javascript. You can get height and width with following code
width = $( window ).width();
height = $( window ).height();
document.getElementById('widthID').innerHTML=width;
document.getElementById('heightID').innerHTML=height;
You can use above code in your application
Video 100% width and height
You can use Javascript to dynamically set the height to 100% of the window and then center it using a negative left margin based on the ratio of video width to window width.
http://jsfiddle.net/RfV5C/
var $video = $('video'),
$window = $(window);
$(window).resize(function(){
var height = $window.height();
$video.css('height', height);
var videoWidth = $video.width(),
windowWidth = $window.width(),
marginLeftAdjust = (windowWidth - videoWidth) / 2;
$video.css({
'height': height,
'marginLeft' : marginLeftAdjust
});
}).resize();
how to fit background video to all screen sizes
You will need to have a container div, which fits to the screen, and then add a class to the video which will resize it to width or height.
CSS:
.container {
width: 100%;
height: 100%;
position: absolute;
padding:0;
margin:0;
left: 0px;
top: 0px;
z-index: -1000;
overflow:hidden;
}
.videoPlayer {
min-height: 100%;
//min-width:100%; - if fit to width
position:absolute;
bottom:0;
left:0;
}
HTML:
<div class="container"><video class="videoPlayer">Code goes here</video></div>
Or Read this..
Source: WesBOS
Fitting background video
You may also want to add: object-fit
#sky-video {
position: fixed;
width: 100%;
height: 100%;
z-index: -100;
object-fit: cover;
}
HTML5 video fit width OR height
Solved it myself with a javascript function:
window.addEventListener('resize', resize, false);
video.height = 100; /* to get an initial width to work with*/
resize();
function resize() {
videoRatio = video.height / video.width;
windowRatio = window.innerHeight / window.innerWidth; /* browser size */
if (windowRatio < videoRatio) {
if (window.innerHeight > 50) { /* smallest video height */
video.height = window.innerHeight;
} else {
video.height = 50;
}
} else {
video.width = window.innerWidth;
}
};
Related Topics
Select First Descendant with CSS
Why Is My CSS Media Query Being Ignored or Overridden
Background Image Not Displaying in Chrome Browser
How to Remove The Arrows from Input[Type="Number"] in Opera
The Keyboard Pushes a Div Up & Out of The Screen
Youtube Embedded Video as Iframe with Border-Radius
Ie8 Horizontal Scrollbar Problem
Div Table-Cell Vertical Align Not Working
Styling HTML5 Number Input (Spin Box) in Chrome
Jquery-Mobile Page Transitions - Flickering (Separate Pages)
Styling Dropdowns (Select) Boxes
How to Make an Inverse Transparent Circle in CSS
<Body> Background-Color Property Doesn't Work Correctly with HTML5 Doctype
How to Make The Width of My <Figcaption> Match The Width of The <Img> Inside Its <Figure> Tag