Embedded video appears only when changing browser window size

I'm facing a strange video embed issue.

In any desktop browser (Chrome, Edge, etc.), I navigate to https://veganism101.com/faq-on-veganism-for-health/ and scroll all the way down to the question "Troubleshooting" and expand it.

On the right there's supposed to be an embedded youtube video (just above the caption: Custom HTML Embedded Video). But it's not there. But when I minimize/maximize my browser window or even slightly change the browser window size, the video appears!

I tried this on different desktop browsers, different desktop computers. Same issue. Surprisingly this issue does not happen when viewing on a mobile device.

This is the code that I'm using to embed the video.

.codegena {
  position:relative;
  width:100%;
  height:0;
  padding-bottom:56.27198%;
}

.codegena iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

<div class="codegena">
  <iframe width="560" height="329" src="https://www.youtube.com/embed/OwlGTVh06NQ?&amp;modestbranding=1&amp;rel=0" frameborder="0" allowfullscreen="">
  </iframe>
</div>

I have no idea what is causing this. Very strange behavior.

Solution

Thanks to @agent-biscutt for pointing me in the right direction. Tweaking the suggestion further, adding !important to the width and height of the iframe worked for me. The video shows and is responsive. I know it's not always best practice to use this in CSS, but feel like this was one of those cases. Anyway, this is how I tweaked it:

.codegena iframe{
  position:absolute;
  top:0;
  left:0;
  width:100% !important;
  height:100% !important;
}