ページスピードインサイト対応の Youtube の埋め込み方

Youtube の複数の動画を埋め込むとページ自体が非常に遅くなる(重い)時の高速化(軽量化)の方法のパート2．

上記ページは比較的アクセスの多いページで，これを使われているページも結構あるようです．
今回，さらにページスピードインサイトのスコアアップする方法が見つかったので，それを紹介します．

何をやったかというと，もともと，iframe で設置しておいて，javascript の読み込み時に img に変更し，クリックでまた iframe に変更という方法をとっていたのを最初から img で設置するという方法に変更したということ．

ソース

javascript

ソースはfastyt.img.js
上記リンクを右クリックして，「ファイルを保存」するとソースが保存される．
置いてある場所は変わる可能性があるので，ダウンロードして自分のサイトに設置してください．

CSS

CSS は前回と同じ．すでに設置してある場合はそのまま使えます．
ソースはfastyt.css
上記リンクを右クリックして，「ファイルを保存」するとソースが保存される．

Youtube の再生ボタン用画像

一番上にある前回のページの中を参考に画像を入れてください．
入れた場所によっては css を変更する必要があります．

設置方法

動画を埋め込んでいるページを変更します．

以下をヘッダなどに入れます．

<script src="/js/fastyt.img.js" type="text/javascript" defer></script>
<link href="/css/fastyt.css" rel="stylesheet" type="text/css">

以下の動画のタグは埋め込みたい場所に入れます．

シンプル版

<img class="fastyt" src="https://img.youtube.com/vi/動画ID/ファイル名.jpg" width="xxx" height="xxx" alt="動画の説明">

width と height は埋め込みたい動画のサイズによって，width と height を入力し，
ファイル名.jpg は画像サイズによって，下のものが入ります．

ファイル名.jpg	サイズ	アスペクト比
default.jpg	120 x 90	4:3
mqdefault.jpg	320 x 180	16:9
hqdefault.jpg	480 x 360	4:3
sddefault.jpg	640 x 480	4:3
hq720.jpg	1280 x 720	16:9
maxresdefault.jpg	1280 x 720	16:9

独自サムネイル版

サムネイルを独自のものにしたい場合は以下のように記述すれば同じように表示することが可能です．

<img
  class="fastyt"
  src="サムネイル画像のURL"
  data-youtubeid="xxxxxxxxx"
  width="800"
  height="450"
  alt="動画サムネイル"
>