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.

CodePudding user response：

If this is your website, then there is one obvious problem. When I go into developer controls, the video's iframe has a width and height of 0. Fix this by amending the css:

iframe{
    width: 602px;
    height: 337.12px;
}

If its not your website, not your problem, though you might wanna say something to the owners.

CodePudding user response：

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;
}