關注動態創建的嵌入式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它鏈接到。