页面渲染Youtube Shorts为普通视频，手动替换URL却正常识别的问题

解决方案 #

1. 调整iframe加载时机 #

浏览器首次渲染时，页面可能还没加载完Youtube识别Shorts的相关脚本，或者页面内的其他DOM操作脚本干扰了iframe的初始解析。手动替换时页面环境已经稳定，所以能正常识别。

解决办法：等页面完全加载后再插入iframe，用JS动态生成：

window.addEventListener('load', () => {
  const container = document.querySelector('.product__image__main'); // 替换成你的iframe父容器选择器
  const iframe = document.createElement('iframe');
  iframe.className = 'product__image__main__iframe';
  iframe.dataset.lazy = 'false';
  iframe.dataset.video_type = 'youtube';
  iframe.src = 'https://www.youtube.com/embed/mdEQ_Tx8nww?enablejsapi=1&rel=0';
  iframe.frameBorder = '0';
  iframe.allowFullscreen = true;
  container.appendChild(iframe);
});

2. 确保iframe的宽高比为9:16 #

Youtube Shorts是竖屏内容，必须保证iframe的宽高比为9:16，否则首次渲染时会强制转为普通横屏视频样式。手动替换时可能继承了页面后续加载的正确样式，所以显示正常。

给iframe的父容器添加比例控制样式：

.product__image__main {
  position: relative;
  width: 100%;
  padding-bottom: 177.78%; /* 16/9 = 1.7778，对应9:16竖屏比例 */
}
.product__image__main__iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

同时检查你的现有CSS，确保没有给iframe设置固定的横屏宽高。

3. 规避缓存问题 #

浏览器首次加载时可能缓存了旧的Youtube嵌入脚本，导致无法识别Shorts。手动替换时触发了脚本重新加载，所以正常。

解决办法：在iframe的src后加一个动态随机参数，避免缓存：

<!-- 用JS动态生成随机数 -->
<iframe class="product__image__main__iframe" data-lazy="false" data-video_type="youtube" src="https://www.youtube.com/embed/mdEQ_Tx8nww?enablejsapi=1&rel=0&t=<%= new Date().getTime() %>" frameborder="0" allowfullscreen=""></iframe>

或者直接强制刷新页面（Ctrl+F5）清除缓存后测试。

4. 排查页面其他脚本干扰 #

页面中的视频播放器插件、DOM修改脚本可能在首次渲染时修改了iframe的属性或样式，导致Youtube无法识别为Shorts。

解决办法：

• 临时禁用页面上的非必要脚本，逐个排查哪个脚本导致了问题。
• 检查是否有脚本在iframe加载后修改了它的src属性、类名或样式。

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