Squarespace站点YouTube视频自动播放异常：仅闻声音无画面

嘿，我之前帮朋友调试过Squarespace的自动播放视频问题，你的情况我太熟悉了！你能听到声音但看不到视频，核心原因是Squarespace的视频组件远不止靠点击.sqs-video-icon这一步完成初始化——手动点击时，组件会同步处理视频帧加载、容器显示状态切换等逻辑，但jQuery的.click()模拟点击往往只触发了底层的播放指令，漏掉了UI层面的渲染更新。

下面是几个经过验证的解决方案，你可以挨个试试：

jQuery的.click()有时候会跳过部分原生事件触发，换成原生的click()方法可能更靠谱：

$(document).ready(function(){
  setTimeout(function(){
    document.querySelector('.sqs-video-icon').click();
  }, 600);
});

有时候视频容器的透明度或显示状态没被正确切换，点击后手动强制更新样式：

$(document).ready(function(){
  setTimeout(function(){
    const videoIcon = $('.sqs-video-icon');
    videoIcon.click();
    // 强制让视频容器显示出来
    videoIcon.closest('.sqs-block-video').find('.sqs-video-wrapper').css({
      'opacity': '1',
      'display': 'block'
    });
  }, 600);
});

如果Squarespace已经加载了YouTube的iframe，直接调用官方API的播放方法是最稳妥的：

$(document).ready(function(){
  setTimeout(function(){
    // 定位到视频iframe
    const videoIframe = $('.sqs-video-wrapper iframe')[0];
    if(videoIframe && videoIframe.contentWindow){
      // 发送播放指令给YouTube iframe
      videoIframe.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
    }
  }, 600);
});

• Squarespace的组件类名可能随版本更新变化，如果.sqs-video-icon找不到元素，记得用浏览器开发者工具重新定位正确的选择器。
• 部分浏览器会阻止无交互的自动播放，不过你用了延迟点击，已经满足“用户与页面有交互”的隐性要求；如果还是不行，可以先给视频设置静音，播放后再取消静音。

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