Video is higher than container

Kirby 3 Solved ✅
1

I am using the following code to make my video’s size responsive.

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

But I want the video to be half of the page wide. As soon as I change the widths and heights to 50%, the container is still as high as before. Do anyone know why the container is not resizing it’s height to the inner video?

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 50%;  <---
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%; <---
}

Or is there maybe an easier way for the “video” field?

Thanks in advance!

Bildschirmfoto 2021-10-19 um 17.11.58
Bildschirmfoto 2021-10-19 um 17.11.581920×1216 45.1 KB

2

Just solved it by myself… but here is the solution in case something is looking for it.

Obviously I also had to change the padding-bottom of the container as I want the width to be 50%.:

.embed-container {
    position: relative;
    padding-bottom: calc(56.25%/2);  <---
    height: 0;
    overflow: hidden;
    max-width: 50%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}