Video/Image Slider resize to fit screen (both width and height)

Question

I'm using this slider code to show my image and video:

Code: https://codepen.io/1wdtv/pen/jbjZeb

However the problem is that the slider is only responsive when it comes to the width. meaning if you resize your browser it will resize the image/video with it, without taking into regards its Height.

Is it possible to make the video/image fit exactly the screen from the height and width?

I want them to show on the screen witout having to scroll down in order to see the rest of the video/image. even if it meant stretching the video/image

Thank you

Answer 1

You can add this to your CSS:

.slider-video {
  height: 100%;
}
video { 
  object-fit: fill;
}

This will make it take up the entire height. And it will stretch to fill the width. This may skew the video but you said that was acceptable.