关注动态创建的嵌入式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它链接到。