Make Video Fit 100% with Any Screen Resolution

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