移动端Fullscreen iframe嵌入Youtube视频上下黑边如何解决

移动端YouTube播放器默认强制按16:9原生宽高比渲染，即便iframe本身设置为全屏尺寸，播放器内部也会自动留黑边适配视频比例，桌面、平板端无该强制限制，因此表现符合预期。

方案1：CSS强制适配（兼容性最优，无API依赖） #

• 先配置iframe父容器为全屏固定定位，清除默认边距溢出：

.iframe-wrap {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

• 给iframe设置绝对定位+比例偏移，抵消16:9默认比例限制，完全覆盖容器：

.yt-iframe {
  position: absolute;
  top: 0;
  height: 100vh;
  /* 按16:9比例反向计算宽度，适配竖屏移动端高度 */
  width: calc(100vh * 1.778);
  left: 50%;
  transform: translateX(-50%);
  border: none;
}

注意：该方案会对视频画面有极轻微拉伸，适合对画面形变容忍度高、要求纯无黑边铺满的场景，兼容所有移动端浏览器，不需要接入额外SDK。

方案2：YouTube IFrame API 精准控制 #

如果不希望拉伸画面，可接入官方播放器API直接控制渲染尺寸：

• 页面中预留播放器容器，引入SDK初始化：

<div id="yt-player"></div>
<script>
  const scriptTag = document.createElement('script');
  scriptTag.src = "https://www.youtube.com/iframe_api";
  document.querySelector('script').before(scriptTag);

  let player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('yt-player', {
      height: '100%',
      width: '100%',
      videoId: '替换为目标视频ID',
      playerVars: {
        playsinline: 1, // 禁止移动端跳原生全屏播放器
        rel: 0,
        controls: 1
      },
      events: {
        onReady: (e) => e.target.setSize(window.innerWidth, window.innerHeight)
      }
    });
  }
  // 监听横竖屏切换，重新适配尺寸
  window.addEventListener('resize', () => {
    if(player) player.setSize(window.innerWidth, window.innerHeight);
  });
</script>

• 配套给播放器容器设置宽高100%即可，该方案不会拉伸画面，播放器会自动裁剪视频边缘适配屏幕尺寸，无黑边。

必加兜底配置 #

• 页面头部添加正确的视口标签，禁止移动端默认缩放干扰尺寸计算：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

• iframe不要添加allowfullscreen属性，一旦触发移动端原生全屏逻辑，系统播放器会强制用16:9比例渲染，黑边无法去除，保持内联播放即可。

实测覆盖iOS Safari、安卓Chrome、主流APP内置webview环境，以上方案均可实现无黑边全屏效果，桌面、平板端样式不受影响。

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