的Youtube嵌入iframe中顯示了片刻

黑色的iframe我需要嵌入使用YouTube API的iframe我的網頁上的視頻。的Youtube嵌入iframe中顯示了片刻

在我的代碼，當用戶點擊一個按鈕「添加視頻」我需要添加I幀的仲裁數量。

出於技術原因（在我的現實世界的應用程序代碼）我需要使用innerHTML屬性來添加此代碼。

我知道改變innerHTML導致黑短暫的延遲出現，你可以看到活生生的例子按下幾次「添加視頻」按鈕。

我想知道是否有辦法儘量減少黑色的短延遲而不改變使用innerHTML。

現場演示 https://jsbin.com/kififenequ/edit?html,output

(function (window) { 
    document.addEventListener('DOMContentLoaded', event => { 
     let html = '<iframe width="640" height="360" src="https://www.youtube.com/embed/jm0lzLHxauY?rel=0&amp;controls=0" frameborder="0" allowfullscreen></iframe>'; 

     let fragmentFromString = function (strHTML) { 
      return document.createRange().createContextualFragment(strHTML); 
     } 

     let elmVideos = document.getElementById('videos'); 
     let elmBtnInsert = document.getElementById('btn-insert'); 

     elmBtnInsert.addEventListener('click', event => { 
      elmVideos.innerHTML += html; // I CANNOT CHANGE THIS 
     }); 
    }); 
})(window);

來源

2017-02-28 Radex

innerHTML不是黑色閃爍的原因。當你直接在瀏覽器中打開iframe網址時，你甚至可以看到它：https://www.youtube.com/embed/jm0lzLHxauY?rel=0&controls=0

預覽圖像只需要一些時間來加載，你爲什麼這麼麻煩？你可以做的就是添加iframe的隱形，等待iframe的load事件，然後顯示它。但我認爲沒有任何事情會發生，甚至會有一些黑色閃爍。（另外，也不能保證這會工作，根據不同的YouTube播放器加載圖像的方式，我並沒有考慮這樣做）

來源

2017-02-28 15:00:02 Connum

的Youtube嵌入iframe中顯示了片刻

回答

相關問題