Squarespace中YouTube iframe控制脚本失效：注入位置与代码排查

我来帮你搞定这个问题，咱们分两部分梳理：首先是脚本在Squarespace里的正确注入位置，然后是你代码里存在的问题和修复方案。

一、脚本注入的正确位置 #

Squarespace的页面加载机制有特殊性，脚本不能随便放，推荐这两个位置：

• 单页面注入：如果这个视频只在某一个页面用，进入该页面的「设置」→「高级」→「页面代码注入」，把所有脚本粘贴到**页脚（Footer）**区域。因为页脚加载时页面DOM已经完全渲染，能确保脚本找到你的iframe元素。
• 全站注入：如果多个页面需要这个功能，就去「设置」→「高级」→「代码注入」，同样把脚本放在页脚，避免阻塞页面首次加载。

⚠️ 注意：绝对不要放在页眉（Header），否则脚本执行时iframe还没渲染，会出现找不到元素的错误。

二、你的代码存在的问题及修复 #

1. jQuery依赖可能失效 #

你的滚动事件用了$(window).scroll()，但Squarespace不一定默认加载jQuery，就算加载了也可能有版本冲突。最稳妥的办法是改用原生JS写滚动监听，彻底摆脱依赖：

// 替换原来的jQuery滚动事件
window.addEventListener('scroll', function() {
  const iframe = document.getElementById('ytplayer');
  if (!iframe || !player) return; // 防止player未初始化时报错

  // 获取iframe的视口位置
  const rect = iframe.getBoundingClientRect();
  // 判断是否在视口内：元素顶部低于视口高度，且元素底部高于视口顶部
  const isVisible = rect.top < window.innerHeight && rect.bottom > 0;

  if (isVisible) {
    player.playVideo();
  } else {
    player.pauseVideo();
  }
});

2. Player变量作用域问题 #

你原来的player变量是在onYouTubeIframeAPIReady函数内部定义的，全局作用域访问不到它，导致滚动事件里的player是undefined。要把player提升到全局作用域：

// 把player变量放在函数外面，变成全局变量
let player; // 用let代替var，更符合现代JS规范

function onYouTubeIframeAPIReady() {
  player = new YT.Player('ytplayer', {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

3. 自动播放被浏览器拦截 #

现在Chrome、Safari等主流浏览器都有自动播放限制，非静音视频会被阻止自动播放。你需要修改iframe的src参数，加上mute=1和autoplay=1，同时在播放器就绪时确保静音：

修改后的iframe代码：

<iframe id="ytplayer" width="560" height="315" 
  src="https://www.youtube.com/embed/uuRC8Pmud3o?enablejsapi=1&rel=0&showinfo=0&controls=0&mute=1&autoplay=1" 
  frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>

对应的onPlayerReady函数：

function onPlayerReady(event) {
  event.target.mute(); // 先确保静音
  event.target.playVideo();
}

4. 滚动事件性能优化 #

原生scroll事件会频繁触发（每秒几十次），容易导致页面卡顿。建议用节流函数限制触发频率，比如每100ms触发一次：

// 节流函数：控制函数执行频率
function throttle(func, delay) {
  let lastCall = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastCall >= delay) {
      lastCall = now;
      func.apply(this, args);
    }
  };
}

// 用节流包装滚动事件
window.addEventListener('scroll', throttle(function() {
  const iframe = document.getElementById('ytplayer');
  if (!iframe || !player) return;

  const rect = iframe.getBoundingClientRect();
  const isVisible = rect.top < window.innerHeight && rect.bottom > 0;

  if (isVisible) {
    player.playVideo();
  } else {
    player.pauseVideo();
  }
}, 100)); // 每100ms触发一次，可根据需求调整

5. 冗余代码清理 #

你原来的onPlayerStateChange里的done变量完全没用到，可以删掉，简化逻辑：

function onPlayerStateChange(event) {
  // 视频结束时自动重播
  if (event.data === YT.PlayerState.ENDED) {
    player.playVideo();
  }
}

三、完整修复后的代码 #

把下面的iframe和脚本分别放到对应的位置（iframe放在页面内容区，脚本放在Squarespace页脚注入区）：

iframe代码（插入到页面的内容模块中）： #

<iframe id="ytplayer" width="560" height="315" 
  src="https://www.youtube.com/embed/uuRC8Pmud3o?enablejsapi=1&rel=0&showinfo=0&controls=0&mute=1&autoplay=1" 
  frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>

脚本代码（放在Squarespace页脚注入区）： #

// 全局播放器变量
let player;

// 异步加载YouTube IFrame Player 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加载完成后初始化播放器
function onYouTubeIframeAPIReady() {
  player = new YT.Player('ytplayer', {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

// 播放器就绪时自动播放（静音状态）
function onPlayerReady(event) {
  event.target.mute();
  event.target.playVideo();
}

// 视频结束时自动重播
function onPlayerStateChange(event) {
  if (event.data === YT.PlayerState.ENDED) {
    player.playVideo();
  }
}

// 节流函数优化性能
function throttle(func, delay) {
  let lastCall = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastCall >= delay) {
      lastCall = now;
      func.apply(this, args);
    }
  };
}

// 滚动监听：视口内播放，视口外暂停
window.addEventListener('scroll', throttle(function() {
  const iframe = document.getElementById('ytplayer');
  if (!iframe || !player) return;

  const rect = iframe.getBoundingClientRect();
  const isVisible = rect.top < window.innerHeight && rect.bottom > 0;

  if (isVisible) {
    player.playVideo();
  } else {
    player.pauseVideo();
  }
}, 100));

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