嵌入式YouTube视频仅在调整浏览器窗口大小时才显示问题求助

问题根因 #

你所用的FAQ折叠面板初始处于隐藏状态时，内部的视频容器codegena宽高计算未被浏览器正确执行，嵌入的YouTube iframe无法获取到有效的渲染尺寸，因此初始加载后未正常绘制。调整窗口大小会触发全局DOM重排，容器和iframe的尺寸被重新计算，视频才正常显示。移动端因为页面布局逻辑和桌面端折叠面板的渲染逻辑不同，因此不会复现问题。

解决方案 #

方案1（改动最小，优先推荐）：给视频容器添加CSS强制渲染属性 #

给.codegena类新增2行CSS属性，强制浏览器开启硬件加速渲染，避免初始渲染失效：

.codegena {
  position:relative;
  width:100%;
  height:0;
  padding-bottom:56.27198%;
  /* 新增以下两行 */
  transform: translateZ(0);
  will-change: height;
}

方案2：监听折叠面板展开事件手动触发重排 #

在折叠面板的展开回调函数中加入以下JS代码，主动触发容器重排即可：

// 面板展开后执行以下代码
const videoContainer = document.querySelector('.codegena');
if (videoContainer) {
  // 以下操作无视觉影响，仅强制浏览器重新计算容器尺寸
  videoContainer.style.display = 'none';
  void videoContainer.offsetWidth;
  videoContainer.style.display = 'block';
}

方案3：延迟加载iframe #

初始不设置iframe的src属性，等用户点击展开Troubleshooting面板时再动态赋值src，避免隐藏状态下加载失效：

<div class="codegena">
  <!-- 初始将视频地址存入data-src属性，src留空 -->
  <iframe width="560" height="329" data-src="https://www.youtube.com/embed/OwlGTVh06NQ?&modestbranding=1&rel=0" frameborder="0" allowfullscreen=""></iframe>
</div>

面板展开时执行以下JS：

const videoIframe = document.querySelector('.codegena iframe');
if (videoIframe && !videoIframe.src) {
  videoIframe.src = videoIframe.dataset.src;
}

内容的提问来源于stack exchange，提问作者zulu