Bounding a video into a box-CodePudding

I am trying to make a video fit into a div with a given width and height. The problem is that if the video is higher than the height of the div, the video exceeds the limits of this div. I'm wondering if there is a CSS rule or something to cut the video to the limits the div.

Here is the problem: Video out of the box

The code is simple:

HTML:

<body>

<div id="container">
    <video id="timelapse" src="videos/Timelapse_campamento.mp4" autoplay loop></video>
</div>

</body>

CSS:

#container {
    position: relative;
    margin: auto;
    width: 1000px;
    height: 200px;
    border: 30px solid rgba(0, 0, 0, 0.5);
}

#timelapse {
    width: 100%;
    z-index: -3;
    position: absolute;
}

CodePudding user response：

If you want the video to fit to the div, you can add height: 100% to the video (css), and if you want it to be cut, you can add overflow: hidden to the div.

CodePudding user response：

A simple fix would be

Add height:100%; in CSS

#timelapse{
width: 100%;
height:100%;
/*changed in here*/

z-index: -3;
position: absolute;
}

And if you want it to stretch video or fit the video inside the box you can use object-fit: fill;

#timelapse{
width: 100%;
height:100%;
object-fit: fill;
z-index: -3;
position: absolute;
}

Can also use overflow: hidden; to not display the part that has been overflowed