重点动态创建嵌入式YouTube播放器

Question

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

＆＃13;

＆＃13;

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);

＆＃13;

＆＃13;

＆＃13;

此代码插入播放器，并调用onload，但播放器仍无法获得焦点。不知道这是否可行？

Answer 1

您需要关注iframe内的文档才能实现此目标，但由于安全原因，这是不可能的。

但是，您可以添加隐藏按钮input，重点关注该按钮，然后使用来自youtube的keyCode和player API暂停并播放视频这个重点输入的空格键。

查看this answer，然后点击codepen链接。