这个问题我之前也碰到过，核心原因是YouTube播放器的内置双击退出逻辑只对它自身触发的全屏状态生效——当你用外部按钮手动调用requestFullscreen时，全屏上下文是由你的代码控制的，而非YouTube播放器内部管理，所以它的双击事件监听不会响应。

下面是具体的解决方案，通过手动监听视频区域的双击事件，强制触发全屏退出，同时避免和播放器自身的交互逻辑冲突：

步骤1：HTML结构示例 #

假设你的页面结构是这样的（用容器包裹播放器，方便控制全屏范围）：

<div id="player-container">
  <div id="player"></div>
</div>
<button id="external-fullscreen-btn">外部全屏按钮</button>

步骤2：JavaScript实现 #

let youtubePlayer;

// 初始化YouTube播放器
function onYouTubeIframeAPIReady() {
  youtubePlayer = new YT.Player('player', {
    height: '360',
    width: '640',
    videoId: 'YOUR_VIDEO_ID', // 替换成你的视频ID
    events: {
      'onReady': handlePlayerReady
    }
  });
}

function handlePlayerReady(event) {
  // 绑定外部全屏按钮的点击事件
  const fullscreenBtn = document.getElementById('external-fullscreen-btn');
  const playerContainer = document.getElementById('player-container');
  
  fullscreenBtn.addEventListener('click', () => {
    // 兼容不同浏览器的全屏API
    if (playerContainer.requestFullscreen) {
      playerContainer.requestFullscreen();
    } else if (playerContainer.webkitRequestFullscreen) {
      playerContainer.webkitRequestFullscreen();
    } else if (playerContainer.msRequestFullscreen) {
      playerContainer.msRequestFullscreen();
    }
  });

  // 监听播放器区域的双击事件，实现退出全屏
  const playerElement = document.getElementById('player');
  let lastClickTimestamp = 0;
  
  playerElement.addEventListener('click', (e) => {
    const now = Date.now();
    // 判断是否为双击（间隔小于300ms）
    if (now - lastClickTimestamp < 300) {
      // 阻止事件冒泡，避免触发YouTube播放器的暂停/播放逻辑
      e.preventDefault();
      e.stopPropagation();
      
      // 兼容不同浏览器的退出全屏API
      if (document.fullscreenElement) {
        document.exitFullscreen();
      } else if (document.webkitFullscreenElement) {
        document.webkitExitFullscreen();
      } else if (document.msFullscreenElement) {
        document.msExitFullscreen();
      }
    }
    lastClickTimestamp = now;
  });
}

关键细节说明 #

• 双击判断逻辑：通过两次点击的时间差（300ms）识别双击，这个数值可以根据需求调整。
• 事件阻止：用preventDefault()和stopPropagation()避免双击同时触发YouTube播放器的默认暂停/播放行为，保证交互逻辑清晰。
• 浏览器兼容性：覆盖了标准、webkit内核（Chrome、Safari）和IE的全屏API，确保在主流浏览器中生效。
• 全屏上下文统一：不管是外部按钮触发的容器全屏，还是播放器内部触发的全屏，document.fullscreenElement都能正确识别当前全屏元素，调用exitFullscreen即可退出。

这样修改后，无论是哪种方式进入的全屏，双击视频区域都能正常退出全屏状态了。

内容的提问来源于stack exchange，提问作者Matías Cánepa