點擊圖片, play 播放鍵再載入 Youtube 影片

以前一直沒什麼機會遇到一個頁面要載入一堆 youtube 影片，大概是我很討厭網頁裡面嵌 youtube (我比較喜歡 host 影片在自己的 server)，所以也不怎麼在乎。但試過之後才發現，一個頁面擺一堆影片完全拖垮瀏覽速度，卡到不行...，雖然我早有預期會有這個狀況，但沒想到如此淒慘。

後來輾轉之下，我也沒想到什麼好辦法，唯一目前想到的途徑就是，先去 youtube 要該影片的 thumbnail (縮圖檔) ，有些 api 可以用，這個 stackoverflow 問題的解答已經說得詳細了。

有了 thumbnail 之後，接著就是考驗 HTML / CSS 技術，通常，會在 thumbnail 之上，疊一個 play 按鍵，你可以利用 css 的 :before 或是 :after 的 content 屬性，塞入該 play 鍵的 url，或是放 background，也可以，看你怎麼設計跟規劃。

至於 thumbnail 的顯示，由於他本來就是一張圖片，但你也未必要用 img 標籤，像我的話是走一般的 div 或是其他 tag，設定 background，習慣上我喜歡用 background，然後再用 background-size 去 fit 那張圖的大小到 width 跟 height。

以上我說的做法，HTML 大致的輪廓如下 :
(這些 code 可能未必 run 的起來，我在寫文章，所以只是在盲打，我只在描述『方法』而已 )

<div
  class="thumbnail"
  data-youtube-id="HB09QpIf7_A"
  data-video="https://www.youtube.com/embed/HB09QpIf7_A?&autoplay=1"
  style="background-image: url('http://img.youtube.com/vi/HB09QpIf7_A/sddefault.jpg')">
</div>

Note:
如果想要一點擊，接著就替換為 iframe 時就要自動播放，那 youtube 網址要加上 &autoplay=1。

最後，還是得寫 JavaScript，偵測 play 按鈕或是 thumbnail 被點擊的事件，一旦這個 div 被點擊，就把自己替換為 iframe。

$('.thumbnail').click(function() {
    
  var thisYoutubeId = $(this).attr('data-youtube-id');
  
  var video = 
      ''
      + '<iframe id="video' + thisYoutubeId + '"'
      + 'src="'+ $(this).attr('data-video') +'"'
      + ' webkitAllowFullScreen mozallowfullscreen allowFullScreen'
      + ' frameBorder="0"
      + ' data-ytid="'+thisYoutubeId+'"></iframe>';

  $(this).replaceWith(video);

  });

Note:
如果不想要 iframe 有個灰色邊筐，要設定 frameBorder = " 0 "。

See the Pen VYbJXK by winwu (@winwu) on CodePen.

如果有更好的方法，希望你可以留言，分享一下 :)