快速切换YouTube嵌入iframe全屏模式后无法重开全屏的解决方案咨询

问题场景 #

快速打开并退出YouTube嵌入视频的全屏模式后，iframe内的全屏按钮失效，刷新页面无法恢复，仅关闭重开页面才能恢复正常。

可行解决方案 #

方案1：使用YouTube IFrame API管理全屏状态

通过官方API加载视频，能精准控制全屏事件，避免浏览器原生事件冲突导致的状态混乱。

替换原有代码为以下内容：

<!DOCTYPE html>
<meta charset="utf-8">
<title>Demo</title>
<body>
    <div id="youtube-player"></div>
    <br />

    <script>
        // 加载YouTube IFrame API
        var tag = document.createElement('script');
        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        var player;
        function onYouTubeIframeAPIReady() {
            player = new YT.Player('youtube-player', {
                width: '100%',
                videoId: 'kWi1beTiVig',
                playerVars: {
                    'allowFullscreen': 1
                }
            });
        }

        // 监听全局全屏切换事件，处理异常状态
        document.addEventListener('fullscreenchange', function() {
            if (!document.fullscreenElement && player) {
                // 退出全屏后重置播放器状态，避免残留异常
                player.loadVideoById('kWi1beTiVig');
            }
        });
    </script>
</body>

方案2：监听全屏事件，强制重置iframe

如果不想引入API，可通过监听浏览器全屏事件，在退出全屏时重新加载iframe，清除异常状态：

<!DOCTYPE html>
<meta charset="utf-8">
<title>Demo</title>
<body>
    <iframe id="youtube-iframe" width="100%" src="https://www.youtube.com/embed/kWi1beTiVig" frameborder="0" allowFullScreen="allowFullScreen"></iframe>
    <br />

    <script>
        const iframe = document.getElementById('youtube-iframe');
        const originalSrc = iframe.src;

        // 监听全屏切换事件
        document.addEventListener('fullscreenchange', function() {
            // 退出全屏时延迟重置iframe，避免事件冲突
            if (!document.fullscreenElement) {
                setTimeout(() => {
                    // 添加时间戳避免缓存，强制刷新iframe内容
                    iframe.src = originalSrc + '&t=' + new Date().getTime();
                }, 100);
            }
        });
    </script>
</body>

说明 #

方案1通过官方API从根源控制播放器状态，稳定性更高；方案2更轻量化，适合快速修复。两者核心都是解决浏览器全屏状态与iframe内部状态不一致的问题，避免按钮失效。

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