如何通过YouTube iFrame Player API实现播放即全屏？

YouTube官方确实没有提供直接让播放器启动时进入全屏的参数，你需要结合浏览器的Fullscreen API来实现，同时必须遵守浏览器的核心限制：全屏操作必须由用户主动交互（比如点击、触摸）触发，移动端对此限制尤为严格。

具体实现步骤 #

1. 调整播放器参数：
   将playsinline设为0，这会让iOS设备在播放时默认触发全屏逻辑（Android端仍需结合Fullscreen API完成全屏）。

2. 绑定用户交互触发全屏：
   浏览器不允许无用户交互的自动全屏，必须把播放和全屏操作绑定到用户的主动点击动作上（比如自定义的播放按钮）。

完整代码示例 #

HTML

<!-- 自定义播放按钮 -->
<button id="playVideoBtn">播放视频</button>
<!-- 模态窗口内的播放器容器 -->
<div id="player"></div>

JavaScript

let youtubePlayer;

// 初始化YouTube播放器（需在YouTube API加载完成后执行）
function onYouTubeIframeAPIReady() {
  youtubePlayer = new YT.Player('player', {
    width: '100%',
    height: '100%',
    videoId: 'some_video_id',
    playerVars: {
      enablejsapi: 1,
      playsinline: 0, // 关闭iOS内嵌播放，触发系统全屏逻辑
      controls: 0,
      rel: 0,
      origin: window.location.origin,
      widget_referrer: window.location.origin
    },
    events: {
      'onReady': onPlayerReady
    }
  });
}

// 播放器就绪后绑定点击事件
function onPlayerReady(event) {
  const playBtn = document.getElementById('playVideoBtn');
  playBtn.addEventListener('click', () => {
    // 先触发视频播放
    event.target.playVideo();
    // 调用全屏方法，传入播放器的iframe元素
    triggerFullscreen(youtubePlayer.getIframe());
  });
}

// 兼容多浏览器的全屏函数
function triggerFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

关键注意事项 #

• 交互限制不可突破：绝对不能在播放器加载完成后自动触发全屏，必须绑定到用户的主动操作上，否则浏览器会直接拦截全屏请求。
• 跨域配置正确：确保origin和widget_referrer参数与当前页面域名完全一致，否则播放器API会因跨域问题无法正常工作。
• 模态窗口状态：触发播放/全屏时，包含#player的模态窗口必须处于显示状态，否则可能导致全屏请求失败。

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