如何嵌入静音、循环、自动播放且显示CC字幕的YouTube视频及故障求解

问题根因说明 #

• 循环功能失效：YouTube官方API要求单视频循环必须同时传入playlist参数，参数值与当前使用的videoId完全一致，仅设置loop=1无法触发循环逻辑
• 部分浏览器无显示：
  1. 不同浏览器的自动播放策略限制不同，仅在onReady事件中执行静音操作兼容性不足，需额外在播放器参数中显式声明静音
  2. 缺少playsinline参数，iOS Safari等移动端浏览器会强制弹出全屏播放器，导致页面内无视频显示
  3. 若直接将代码粘贴到WordPress可视化编辑器中，编辑器会自动过滤script标签，导致代码不完整无法加载
• 原有代码注释错误：cc_load_policy: 1实际为强制显示CC字幕，正好匹配显示字幕的需求，原有注释标注为「隐藏字幕」属于错误标注

修复后完整代码 #

<div id="muteYouTubeVideoPlayer"></div>

<script async src="https://www.youtube.com/iframe_api"></script>
<script>
 function onYouTubeIframeAPIReady() {
  var player;
  player = new YT.Player('muteYouTubeVideoPlayer', {
    videoId: 'ofVRwYmc9WA', // YouTube 视频ID
    width: 600,               // 播放器宽度（单位：px）
    height: 316,              // 播放器高度（单位：px）
    playerVars: {
      autoplay: 1,        // 页面加载后自动播放
      controls: 1,        // 显示播放/暂停按钮
      showinfo: 0,        // 隐藏视频标题
      modestbranding: 1,  // 隐藏YouTube Logo
      loop: 1,            // 循环播放
      playlist: 'ofVRwYmc9WA', // 单视频循环必填，值和videoId一致
      fs: 0,              // 隐藏全屏按钮
      cc_load_policy: 1,  // 强制显示CC字幕
      iv_load_policy: 3,  // 隐藏视频注释
      autohide: 0,        // 播放时不隐藏视频控件
      mute: 1,            // 播放器初始化默认静音，兼容不同浏览器
      playsinline: 1      // 移动端浏览器页面内播放，不强制全屏
    },
    events: {
      onReady: function(e) {
        e.target.mute(); // 二次确认静音，保证兼容性
      }
    }
  });
 }
</script>

WordPress嵌入注意事项 #

• 嵌入代码时请选择WordPress编辑器的「自定义HTML」区块，不要粘贴到可视化编辑模式下，避免代码被自动过滤
• 若使用自定义主题的代码嵌入功能，需确保div容器和script代码同时被正确插入到对应页面位置

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