Vanilla JS：在模态框内自动播放视频

Question

在 vanilla JS 中是否有在弹出模式中自动播放视频的功能？有没有可能？

我在 iframe 中有自动播放元素（认为它在 YT 的嵌入式链接中是标准的），但是当模式弹出时我仍然需要点击播放。

此外，当您按下播放然后关闭模式时，视频仍会播放。除了刷新之外，我还没有找到一种方法来阻止它（我的猜测是因为从技术上讲，模式总是在页面上，而我只是把它隐藏了）。

不确定我是否需要更多信息，而不仅仅是我用来在 JS 中调用模式的行，但我有这个：

xmasDayModalTextEl.innerHTML = `<iframe
  width="543"
  height="362"
  src="https://www.youtube.com/embed/VzkVxkiOqGA"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>`

如果您需要更多代码来更好地了解它是如何工作的，请告诉我！我认为这可能只是我编写 innerHTML 的方式！

干杯！

Answer 1

YouTube 的iframe 允许通过autoplay=1 URL 参数触发自动播放： <iframe src="https://www.youtube.com/embed/VzkVxkiOqGA?autoplay=1" ...>。此外，您可以使用 YouTube JavaScript API 来实现。

为了在关闭模式后停止视频，您可以从 DOM 中完全删除 iframe。因此，您还必须在用户打开模式时插入它。

const modal = document.querySelector('#modal-id');
const iframe = `<iframe ... ></iframe>`;

function showModal() {
  modal.innerHTML = iframe;
}

function hideModal() {
  modal.innerHTML = '';
}