焦点动态创建的嵌入式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，专注于它，然后使用YouTube中的keyCode和player API暂停并播放视频，并在您按下焦点输入的空格栏中。p>对此答案有一个查看，并在链接到。