[js]youtube埋め込み高速化「lite yt embed」

明らかに違う。

ダウンロード
サンプル
構築例
展開例
1. 読み込み時
2. 再生時
メリット
オプション
サイズ調整

ダウンロード

GitHub - paulirish/lite-youtube-embed: A faster youtube embed.

A faster youtube embed. Contribute to paulirish/lite-youtube-embed development by creating an account on GitHub.

サンプル

上が通常、下がjs。

Document

構築例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="js/lite-youtube-embed/src/lite-yt-embed.css" />
    <script src="js/lite-youtube-embed/src/lite-yt-embed.js"></script>
</head>
<body>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/iVstp5Ozw2o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
    <lite-youtube videoid="iVstp5Ozw2o" playlabel="Play"></lite-youtube>
</body>
</html>

展開例

クリック時にiframeが出力されるので、アクションがなければyoutubeの読み込みは発生しない。

読み込み時

<lite-youtube videoid="iVstp5Ozw2o" playlabel="Play" style="background-image: url("https://i.ytimg.com/vi/iVstp5Ozw2o/hqdefault.jpg");">
    <button type="button" class="lty-playbtn"><span class="lyt-visually-hidden">Play</span></button>
</lite-youtube>

再生時

<lite-youtube videoid="iVstp5Ozw2o" playlabel="Play" style="background-image: url("https://i.ytimg.com/vi/iVstp5Ozw2o/hqdefault.jpg");" class="lyt-activated">
    <button type="button" class="lty-playbtn"><span class="lyt-visually-hidden">Play</span></button>
    <iframe width="560" height="315" title="Play" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" src="https://www.youtube-nocookie.com/embed/iVstp5Ozw2o?autoplay=1&playsinline=1"></iframe>
</lite-youtube>

メリット

レスポンシブに対応してる。

同一ページに複数設置可能。

    <lite-youtube videoid="iVstp5Ozw2o" playlabel="Play"></lite-youtube>
    <lite-youtube videoid="iVstp5Ozw2o" playlabel="Play"></lite-youtube>
    <lite-youtube videoid="iVstp5Ozw2o" playlabel="Play"></lite-youtube>

マージン等はついてないので、これをラッピングして調整するのがいい感じ。

オプション

通常の埋め込みと同動作でいいならいじらなくていい。オプションを知りたかったら「Lite YouTube Embed」で調べたら色々出てくる。

YouTubeの埋め込みを高速化する Lite YouTube Embed

記事内に YouTube動画を埋め込む方法（レスポンシブ化とか）は過去に掲載しているのですが、動画を載せたページが重くて PageSpeed Insights で色々注意されるのですよ。^^; しょうがないよなぁ～と諦めていたのですが、それを解消してくれる JavaScript ライブラリが既に有ったのですね♪ 先ず...

サイズ調整

標準だと最大幅は720pxになってる。

もっと大きく設置したければ、max-widthのチェックを外せばいい。

lite-youtube{
    max-width: none !important;
}

注意点として、表示されてるサムネイルは「hqdefault.jpg」だから幅480pxということで、既に引き伸ばされてる。それをさらに大きくするのだから、粗が目立つ様になる。

画像の差し替えはstyle（background-image）でやっていくことになる。

<lite-youtube videoid="ogfYd705cRs" style="background-image: url('https://i.ytimg.com/vi/ogfYd705cRs/hqdefault.jpg');">
  <a href="https://youtube.com/watch?v=ogfYd705cRs" class="lty-playbtn" title="Play Video">
    <span class="lyt-visually-hidden">Play Video: Keynote (Google I/O '18)</span>
  </a>
</lite-youtube>

Youtubeのサムネイル取得は簡単 | デジタルコンサルタントAWS

仕事の中で、Youtubeのサムネイルを自動取得するような処理を書いてみようと思い立ち、その方法を調べてみました。 Youtubeのサムネイルは、とても簡単に取得できるのですね。 URLは、 …

でかい画像のバリエーションはあまりないのと、最大サイズは登録されてなかったら存在しないフォーマットらしいのでyoutubeから直接引っ張る際はチェックが必要。自前だったらサーバーにアップした画像を引っ張ってもいいと思います。