hi3103の備忘録

やりたいこと

• 余計なデータ通信を発生させないために、YouTube動画のサムネイルをタップ・クリックしたときにだけ、埋め込み動画のiframeを読み込ませる。
• 16:9のレスポンシブ対応をする。
• サムネイル画像と埋め込みiframeで表示位置がズレないようにする。

サンプル

• https://hi3103.net/study/1902-loadytlater/

用意するもの

• 埋め込みたいYouTube動画のID
  • 再生ページのURLのパラメータにある文字列を控える

 https://www.youtube.com/watch?v=【動画ID】

ソース

HTML

• imgタグのソースに指定しているYouTubeサムネイル画像は、以下のエントリーを参考にURLを取得。
  • YouTubeの動画のサムネイル取得が思った以上に簡単だった件 | EMiAC-Works

<div class="embed-responsive" id="hoge">
    <a href="#">
        <img src="http://i.ytimg.com/vi/【動画ID】/maxresdefault.jpg" alt="">
    </a>
</div>

• クリック後は以下のようなソースになるようにする。

<div class="embed-responsive" id="hoge">
    <iframe src="https://www.youtube.com/embed/【動画ID】?autoplay=1&rel=0&controls=0"></iframe>
</div>

javascript

• jQueryのライブラリ読み込み後に以下を記述。
  • クリックされたaタグの親要素の中身をまるごと書き換えるという処理。

$(function(){
    $('#hoge a').on('click' , function(e){
        e.preventDefault();//リンクの停止
        $(this).parent().html('<iframe src="https://www.youtube.com/embed/【動画ID】?autoplay=1&rel=0&controls=0"></iframe>');
    });
});

• 埋め込みのオプションを指定する場合は、動画IDの後にパラメータを付与。
  • クリックしたらで自動再生：autoplay=1
    • これは入れておくのがおすすめ。
    • 入れないと、サムネタップ→再生ボタンタップで2回閲覧者に行動させることになる。
    • 【追記】YouTubeブラウザの仕様上、スマホだと自動再生しない。追って調べます。
  • 再生終了後に関連動画を表示しない：rel=0
  • コントローラーを表示しない：controls=0
• パラメータは、1つめは「?」で、2つめ以降は「&」でつなげる。

CSS

• サムネイルと埋め込み動画を16:9比率のままレスポンシブ対応させる
  • 参考：Embeds · Bootstrap
• アスペクト比を変えたい場合は、 .embed-responsive の padding-top を変更する。
  • 例：16:9の場合、100/16×9=56.25なので56%。4:3の場合、100/4×3=75なので75%、という考えかた。

.embed-responsive{
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    padding-top: 56%;
    margin-bottom: 1em;
}
.embed-responsive iframe,
.embed-responsive img{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

追記

• 2019-02-23：ソース一部修正しました。