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

Posted 2023-03-13

【中文标题】嵌入视频仅在更改浏览器窗口大小时出现

【英文标题】：Embedded video appears only when changing browser window size

【发布时间】：2021-11-29 21:12:30

【问题描述】：

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

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

右侧应该有一个嵌入的 youtube 视频（就在标题上方：自定义 html 嵌入视频）。但它不存在。但是当我最小化/最大化我的浏览器窗口甚至稍微改变浏览器窗口大小时，视频就会出现！

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

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

.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   src="https://www.youtube.com/embed/OwlGTVh06NQ?&amp;modestbranding=1&amp;rel=0" frameborder="0" allowfullscreen="">
  </iframe>
</div>

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

【问题讨论】：

@Dudi 感谢您将代码格式化为更具可读性。下次会记住的。

没问题，老兄。很高兴我能帮助你！ :)

【参考方案1】：

如果这是您的网站，那么存在一个明显的问题。 当我进入开发者控件时，视频的 iframe 的宽度和高度均为 0。 通过修改 css 来解决这个问题：

iframe
    width: 602px;
    height: 337.12px;

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

【讨论】：

这确实解决了视频不显示的问题，但响应能力消失了。至少这是朝着正确方向迈出的一步。谢谢

祖鲁没问题。

【参考方案2】：

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

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