点击YouTube iframe播放按钮无响应，onPlayerStateChange事件未触发

我想要实现类似tella.tv网站中iframe的行为，现有YouTube iframe代码和对应的JS代码，预期点击播放后隐藏原iframe并创建全屏新iframe，但实际点击播放按钮无反应，onPlayerStateChange事件未触发，仅onYouTubeIframeAPIReady和onLoad函数正常执行。

核心问题分析 #

• iframe src格式错误：原iframe使用普通YouTube视频链接（watch?v=xxx），但YouTube Iframe API要求使用嵌入格式链接（embed/xxx），否则无法正确绑定播放器实例，状态事件自然无法触发。
• 重复加载API脚本：HTML中已引入API脚本，window.onload里又重复创建标签加载，可能导致初始化冲突。
• 点击事件绑定时机问题：window.onload中直接绑定点击事件时，player实例可能未完全初始化，调用player.playVideo()会报错。
• 新iframe参数拼接错误：新iframe的src用?autoplay=1拼接，但原链接已有?v=xxx，应该用&autoplay=1，否则参数无效。

修复后的完整代码 #

HTML部分 #

<body>
    <iframe id="my-video" class="iframe__video" height="80vh" 
            src="https://www.youtube.com/embed/c_oqy0-lvI4" 
            title="YouTube video player" frameborder="0" allowfullscreen></iframe>

    <script src="js/youtube.js"></script>
</body>

JavaScript部分（youtube.js） #

var done = false;
var player;

function onPlayerStateChange(event) {
    console.log("onPlayerStateChange...................")
    if (event.data === YT.PlayerState.PLAYING && !done) {
        done = true;
        // 隐藏原iframe
        const originalIframe = document.getElementById("my-video");
        originalIframe.style.display = "none";
        
        // 创建全屏新iframe
        const fullscreenIframe = document.createElement("iframe");
        fullscreenIframe.src = "https://www.youtube.com/embed/c_oqy0-lvI4?autoplay=1";
        fullscreenIframe.allowFullscreen = true;
        fullscreenIframe.frameBorder = "0";
        Object.assign(fullscreenIframe.style, {
            position: "fixed",
            top: "0",
            left: "0",
            width: "100vw",
            height: "100vh",
            zIndex: "9999" // 确保全屏视频在最上层
        });
        document.body.appendChild(fullscreenIframe);
    }
}

function onYouTubeIframeAPIReady() {
    console.log("onYouTubeIframeAPIReady..............")
    player = new YT.Player("my-video", {
        events: {
            onStateChange: onPlayerStateChange
        }
    });
}

// 仅在API未加载时动态引入，避免重复加载
if (typeof YT === 'undefined') {
    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/iframe_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}

// 点击原iframe区域触发播放，确保player已初始化
document.getElementById("my-video").addEventListener("click", () => {
    if (player) {
        player.playVideo();
    }
});

关键修复点说明 #

1. 修正iframe src为嵌入格式：将watch?v=xxx改为embed/xxx，这是YouTube Iframe API正常工作的核心前提。
2. 移除重复的API加载：取消HTML中的API脚本引入，改为JS中判断是否已加载再动态引入，避免初始化冲突。
3. 确保点击事件安全触发：使用addEventListener绑定点击事件，调用player.playVideo()前先检查实例是否存在。
4. 修正全屏iframe参数：嵌入格式链接直接用?autoplay=1启用自动播放，添加z-index保证全屏视频在页面最上层。
5. 使用严格相等判断：替换==为===，避免类型转换导致的潜在逻辑错误。

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