Iframes not responsive

Hi
I’m working on two websites with URL https://www.moveindazity.nl/ (theme: Gymbase) and URL
https://www.bienebiensart.com/ with iframes.

On the moveindazity (Gymbase) I have also installed a child theme.
But in the regular Gymbase there already is a custom.css file (and I prefer working with the parent theme).

I hade an iframe of a Youtube video. I put this in a div with class “video-container”:

<div class="video-container">
    <iframe width="960" height="540" src="https://www.youtube.com/embed/S9yEDh3MIag?rel=0&showinfo=0" allowfullscreen></iframe>
</div>

In the custom.css I put the following code:

.video-container {
  position: relative;
  height: 0;
  overflow: hidden;
}

/* 16x9 Aspect Ratio */
.video-container-16x9 {
  padding-bottom: 56.25%;
}
 
/* 4x3 Aspect Ratio */
.video-container-4x3 {
  padding-bottom: 75%;
}

.video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

The page is: https://moveindazity.nl/video-piloxing-3/

First the video was visible but for some reason now not anymore.
It has never been responsive.

I used the same CSS code in the child theme, but also it is not responsive. I put the CSS in style.css of the parent, but not responsive. I used more browsers like Opera, Firefox, Chrome…
The page at bienekebiensart.com is: https://www.bienekebiensart.com/piloxing-container/
This seems a little more responsive -except for the smartphone.

I also used media queries, these are the codes:

<h2>Tablet, pc en breedbeeld</h2>
<div class="tabletpc">
 <iframe width="72%" height="540" src="https://www.youtube.com/embed/S9yEDh3MIag?rel=0&showinfo=0" allowfullscreen></iframe>
</div>
<h2>Smartphone landscape</h2>
<div class="landscape">
 <iframe width="512px" height="286px" src="https://www.youtube.com/embed/S9yEDh3MIag?rel=0&showinfo=0" allowfullscreen></iframe>
</div>
<h2>Smartphone portrait</h2>
<div class="portrait">
 <iframe width="290px" height="164px" src="https://www.youtube.com/embed/S9yEDh3MIag?rel=0&showinfo=0" allowfullscreen></iframe>
</div>

and the CSS:

@media only screen and (min-width: 768px) { 
/* plaats hier de css code voor tablets en pc en breedbeeld */
.landscape iframe
{
  display:none;
}
.portrait iframe
{
  display:none;
}
}

@media only screen and (max-width: 767px) { 
/* plaats hier de css code voor smartphones in landscape mode */
.tabletpc iframe
{
  display:none;
}
.portrait iframe
{
  display:none;
}

@media only screen and (max-width: 479px) {
/* plaats hier de css code voor smartphones in portrait mode */
.tabletpc iframe
{
  display:none;
}
.landscape iframe
{
  display:none;
}
}

The pages are: https://moveindazity.nl/video-piloxing2/ and https://www.bienekebiensart.com/piloxing-media-queries/.
Again, on bienekebiensart.com it seems a little more responsive -except for the smartphone.

I need to have the iframes responsive at moveindazity.nl.
I made the same pages + CSS on bienekebiensart.com just to test.
The iframes are not responsive at moveindazity.nl. I have spent many hours on it already this is the reason of this post.
The custom.css (and style.css) seem to be loaded well because all the other CSS works fine.

I also built a simple HTML/CSS website with the same codes in it (to test) and this works fine! It does not seem to work with moveindazity.nl.

If you want to/can help me.. I prefer using the video container because it is less HTML and CSS -less work. But if I have to, I will use the media queries instead.
Does anyone have a hint/suggestion..?
Sincerely
Sasseke