我帮你梳理下代码里的几个关键问题，调整后就能实现点击按钮显示灯箱时自动播放视频的需求了：

原代码中的错误点 #

• 选择器错误：你要修改的是iframe的src属性，但原代码里用了$("st_youtube_video")——既没加类选择器的.，也没指定要操作的是内部的iframe元素，JS根本找不到目标元素。
• src拼接逻辑问题：原URL里的&是HTML转义字符，在JS里直接用&即可；而且多次点击按钮会重复添加autoplay=1，需要做判断避免重复。
• 未处理视频暂停：关闭灯箱时如果不重置视频src，视频会在后台继续播放，影响用户体验。
• 上下文选择器误用：$("st_youtube_video", parent)里的parent没有定义，完全不需要这个写法。

修复后的完整代码 #

HTML部分（保持你的结构，仅确保iframe的src初始不带autoplay） #

<button id="button">打开视频灯箱</button>
<div class="st_youtube_video">
  <iframe frameborder="0" width="1680" height="945" src="https://www.youtube.com/embed/-gVYLXVqQ2c?rel=0" allow="autoplay"></iframe>
  <button class="st_remove">关闭灯箱</button>
</div>

jQuery部分 #

// 存储原始视频URL，避免重复添加autoplay
const originalVideoSrc = $('.st_youtube_video iframe').attr('src');

$('#button').click(function() {
  // 显示灯箱
  $('.st_youtube_video').addClass('st_active');
  // 修改iframe的src，添加autoplay=1（确保只加一次）
  const currentSrc = $('.st_youtube_video iframe').attr('src');
  if (!currentSrc.includes('autoplay=1')) {
    $('.st_youtube_video iframe').attr('src', `${originalVideoSrc}&autoplay=1`);
  }
});

$('.st_remove').click(function() {
  // 隐藏灯箱
  $('.st_youtube_video').removeClass('st_active');
  // 重置视频src，暂停播放
  $('.st_youtube_video iframe').attr('src', originalVideoSrc);
});

关键说明 #

1. 提前存储原始视频URL，这样每次关闭灯箱后可以重置，避免多次点击按钮时重复拼接autoplay=1。
2. 操作目标明确指向.st_youtube_video iframe，确保JS能正确找到要修改的元素。
3. 添加includes('autoplay=1')的判断，防止重复添加参数导致URL冗余。
4. 关闭灯箱时重置src，让视频暂停并回到初始状态，提升用户体验。

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