嵌入式视频仅在更改浏览器 window 大小时出现

Embedded video appears only when changing browser window size

我遇到了一个奇怪的视频嵌入问题。

在任何桌面浏览器(Chrome、Edge 等)中,我导航到 https://veganism101.com/faq-on-veganism-for-health/ 并一直向下滚动到“疑难解答”问题并将其展开。

右边应该有一个嵌入式 YouTube 视频(就在标题上方:自定义 HTML 嵌入式视频)。但它不在那里。但是当我 minimize/maximize 我的浏览器 window 甚至稍微改变浏览器 window 大小时,视频就会出现!

我在不同的桌面浏览器、不同的台式电脑上试过这个。同样的问题。令人惊讶的是,在移动设备上查看时不会发生此问题。

这是我用来嵌入视频的代码。

.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>

我不知道是什么原因造成的。非常奇怪的行为。

如果这是您的网站,那么就有一个明显的问题。 当我进入开发人员控件时,视频的 iframe 的宽度和高度为 0。 通过修改 css:

来解决这个问题
iframe{
    width: 602px;
    height: 337.12px;
}

如果这不是您的网站,不是您的问题,尽管您可能想对所有者说些什么。

感谢@agent-biscutt 为我指明了正确的方向。进一步调整建议,将 !important 添加到 iframe 的宽度和高度对我有用。视频显示并响应。我知道在 CSS 中使用它并不总是最佳实践,但感觉这就是其中一种情况。无论如何,这就是我调整它的方式:

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