关注动态创建的嵌入式 YouTube 播放器

Question

所以我需要在网站中打开一个嵌入式 YouTube 播放器，并且我想将焦点设置在播放器上，以便用户可以与播放器进行交互，例如使用空格键切换视频。

var iframe = Object.assign(document.createElement('iframe'), {
  src: 'https://www.youtube.com/embed/hLQl3WQQoQ0?autoplay=1&enablejsapi=1',
  width: '400',
  height: '200',
  onload: () => {
    console.log('iframe is loaded!');
    iframe.focus();
  }
});

document.body.appendChild(iframe);

此代码插入播放器，并调用了onload，但播放器仍然没有获得焦点。知道这是否可行吗？

Answer 1

您需要专注于iframe 内的文档才能实现这一点，由于安全原因，这是不可能的。

但是，您可以添加一个隐藏按钮 input，将其聚焦，然后使用 keyCode 和 youtube 的 player API 暂停和播放视频，以防您在焦点上按下空格键您的意见。

看看this answer，看看它链接到的codepen。