如何通过自定义按钮切换WordPress中YouTube iframe的视频静音状态

核心问题原因 #

• 未加载YouTube IFrame Player API，代码中直接调用的player对象没有被初始化，属于未定义变量
• WordPress默认开启jQuery兼容模式，直接使用$调用jQuery会抛出未定义错误
• 静音按钮为空元素，没有默认文本/样式，无法被用户点击触发事件

修复后的代码 #

1. HTML代码 #

<iframe id="wp-custom-header-video" name="video-wp" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" width="2000" height="1200" src="https://www.youtube.com/embed/4vGzJ3nTzp4?autoplay=1&controls=0&disablekb=1&fs=0&iv_load_policy=3&loop=1&modestbranding=1&playsinline=1&rel=0&showinfo=0&enablejsapi=1&origin=https%3A%2F%2Fepistolariodelamemoria.cl&widgetid=1" data-gtm-yt-inspected-1_19="true" data-initial-width="2000" data-initial-height="1200"></iframe>
<!-- 按钮添加初始文本，可自行替换为图标 -->
<div id="mute">volume_off</div>

如果要用材质图标，可自行在主题头部引入Google Material Icons字体库，按钮文本直接对应图标名称即可

2. JS代码 #

// 适配WordPress jQuery noConflict模式
jQuery(function($) {
    // 全局存储player实例
    let player;

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

    // API加载完成后初始化播放器
    window.onYouTubeIframeAPIReady = function() {
        player = new YT.Player('wp-custom-header-video', {
            events: {
                'onReady': onPlayerReady
            }
        });
    }

    // 播放器就绪后绑定点击事件
    function onPlayerReady(event) {
        // 适配浏览器自动播放规则，默认设置静音
        player.mute();
        $('#mute').text('volume_off');

        // 绑定静音切换事件
        $("#mute").on("click", function () {
            const mute_toggle = $(this);
            if (player.isMuted()) {
                player.unMute();
                mute_toggle.text("volume_up");
            } else {
                player.mute();
                mute_toggle.text("volume_off");
            }
        });
    }
});

额外注意事项 #

• 可以给#mute按钮添加自定义CSS样式，固定在头部角落、设置指针样式，确保可点击
• 测试时如果出现跨域错误，检查iframe的origin参数是否和你当前站点域名完全匹配

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