video iframe 嵌入後的效能問題，LAZY LOAD YOUTUBE VIDEO，工作筆記，CSS筆記

 前提

這次做到的案件，不乏影片介紹。於是就在首頁遷入YOUTUBE影片，但是只要嵌入後YOUTUBE後，就會導致網頁載入變慢。

網頁的在做載入的時候就會先等影片載入好，光載入就花了4.3秒(圖1)，頁面整個好跑完約12.8秒。

載入時間(圖1)

有一半的時間是在等待嵌入的YOUTUBE 跑完，加載時間會比較久(圖2)

加載錄影(圖2)

作法

網路上有人提供了寫法，先用一個圖片 做代替，播放在做 載入，在讀取上 的確改善很多。

查看連結

以上面文章做個說明(圖3)，這位作者先使用的是srcdoc 放一張圖片，代替背景加載過慢的問題

在srcdoc加入img設定(圖3)

由於srcdoc 這個並非所有瀏覽器都支援，那這次就來做個改善。

直接先秀一張圖在thumbnail。

iframe 就先不載入src，video就不會在載入的時候跑。(圖4)

先載入封面圖(圖4)

最後再透過onclick 點擊圖片的時候 在載入影片(圖5)

點擊播放，在加載影片(圖5)

See the Pen video iframe lazy load by jirg (@pig3629) on CodePen.

在codepen 點擊圖片播放，會被暫停。但實際上放在html 是沒有這個問題，點了播放就直接撥放影片了。

心得

之前做載入影片沒什麼感覺，但當影片載入越多，loading就越久，用lighthouse看也一樣，跑起來就是久....嵌入影片又是不可避免掉的，只能換個方式做播放。

既然youtube影片不是自動播放的話，那麼用這個方式 一樣也可以載入 做到一樣的效果，也能加快速度，耗時減少了很多。(圖6) 

載入時間變少了(圖6)