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

时间:2017-04-19 10:38:33

标签: youtube-api

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



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,但播放器仍无法获得焦点。不知道这是否可行?

1 个答案:

答案 0 :(得分:0)

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

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

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