FC2ブログ共有テンプレートを作成・配布しています。不精なので時々更新。(^^;
Top Page ›  Template ›  カスタマイズ  ›  YouTubeの埋め込みを高速化する Lite YouTube Embed
✎

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

▼

記事内に YouTube動画を埋め込む方法（レスポンシブ化とか）は過去に掲載しているのですが、動画を載せたページが重くて PageSpeed Insights で色々注意されるのですよ。^^;

しょうがないよなぁ～と諦めていたのですが、それを解消してくれる JavaScript ライブラリが既に有ったのですね♪

先ずは見本、記事内に1つだけ動画を入れ、PageSpeed Insights で計測しています。（スマホだと滅茶苦茶数値が悪いのでPCの計測値です。）左の画像は『 YouTube 』を貼った場合、右の画像は『 Lite YouTube Embed 』を貼った場合です。

（↓YouTubeの方は、画像クリックで詳細の展開画像を表示します。）

youtube-psi-1.pngyoutube-psi-3.png

見て頂くと分かる通り、スピードが遅くなる原因は YouTube を表示するために色々読み込む必要が有るため。

動画を1つ読み込むだけでこれですから、記事内に複数ある場合はもっと数値が悪くなりそうです。

因みに ↓ YouTube の方は測定後の絵面が表示されませんでした。

youtube-psi-4.png

Lite YouTube Embed を使って高速化

『 Lite YouTube Embed 』は「 YouTube動画のサムネイルだけ表示し クリックされたら動画のデータを取得する」という仕組みの JavaScript ライブラリ。

paulirish / lite-youtube-embed

GitHub

使い方は色んなサイトに書いて有るのですが、FC2ブログでの使い方を一例として載せておきます。

  1. ① 先ず、下記『 Lite YouTube Embed 』の GitHub から CSS と JavaScript を開きます。
    ▶ Lite YouTube Embed GitHub CSS,JS
  2. ② PCの『メモ帳（Windowsの場合）』を起動し、上記リンクの lite-yt-embed.css を開いて中身を全てコピーし貼り付け、「名前を付けて保存」で「ファイル名：lite-yt-embed.css」（ファイルの種類：すべてのファイル）として保存します。
  3. ③ 同様に、PCの『メモ帳』を開き、同じく上記リンクの lite-yt-embed.js を開いて中身を全てコピーし貼り付け、「名前を付けて保存」で「ファイル名：lite-yt-embed.js」（ファイルの種類：すべてのファイル）として保存します。
    （どちらも『メモ帳』は一例です。それぞれ lite-yt-embed.js という 拡張子 .js , lite-yt-embed.css という 拡張子 .css で保存すれば、他のテキストエディタでも構いません。）
  4. ④ 保存した lite-yt-embed.css と lite-yt-embed.js をFC2ブログの「ファイルアップロード」でサーバーにアップロードします。
  5. ⑤ FC2ブログ管理画面『テンプレートの設定』→使用テンプレートの「HTML編集」枠内 </head> の上に、下記を貼り付けます。その際、下記青文字の部分に④で出来た lite-yt-embed.css と lite-yt-embed.js のURLを入れます。
<link rel="stylesheet" href="https://blog-imgs-〇.fc2.com/～～～/lite-yt-embed.css">
<script src="https://blog-imgs-〇.fc2.com/～～～/lite-yt-embed.js" defer></script>
</head>

青文字部分のURLは [ https://blog-imgs-〇.fc2.com/～～～/ファイル名 ] のようになっているので、ご自身でアップロードしたURLを入れて下さい。
また、</head> の位置を探す場合は、キーボードのCtrlキー＋Fキーを押して検索窓を出し『 </head> 』と入れて探して下さい。

個別記事だけで表示する場合、上記のJSをFC2ブログの『エリア（モード）変数』で括ると更に呼び出すエリアを限定できます。

<!--permanent_area-->
<link rel="stylesheet" href="https://blog-imgs-〇.fc2.com/～～～/lite-yt-embed.css">
<script src="https://blog-imgs-〇.fc2.com/～～～/lite-yt-embed.js" defer></script>
<!--/permanent_area-->
</head>

<!--permanent_area-->～～<!--/permanent_area--> は個別記事の『エリア（モード）変数』なので、固定リンク画面（blog-entry-x.html）でのみCSS,JSが呼び出されます。

（全文表示タイプのテンプレートでは YouTube部分が表示されなくなるので <!--permanent_area--><!--/permanent_area--> で括らないで下さい。）

Lite YouTube Embed の埋め込み

記事投稿画面の YouTube を埋め込みたい所に以下を追加します。

<lite-youtube videoid="YouTubeの動画ID" playlabel="Play"></lite-youtube>

playlabel は、videoidだけだと何の動画かわからなくなるので付けたほうが良いそうです。

また、CSS内にレスポンシブ化するスタイルが既に入っているので、可変用の追加タグ等は不要です。

YouTube 動画のIDは下記画像の場所に有ります。（ご存知の通り、IDは動画によって異なります。^^;）

youtube-id-1.pngyoutube-id-2.png

パラメーターの指定方法

指定のパラメーターをparams=""へ付けるとカスタマイズ出来ます。 

<lite-youtube videoid="YouTubeの動画ID" params="mute=1&start=20&end=30" style="max-width:560px"></lite-youtube>

max-width:560px; を指定しないと、自動的に幅720pxで表示されます。（元のYouTube埋め込みサイズは560px。希望の数値に変更可能です。）

上記のパラメーターだと「ミュート（消音）、20秒後からスタート、30秒後にストップ」になり、その他のパラメーターを付ける場合は『&』で繋げて記述します。（上手くパラメーターが機能しない場合は『&』を『&amp;』と入れて繋げて下さい。）

その他のパラメーターは下記リンクを参照して下さい。
▶ YouTube Supported parameters

（最初にサムネイル画像を緩衝材的に表示するので、YouTubeの方は autoplay=1 がデフォルトになっています。また、突然音が鳴りださないようにパラメーターで mute=1 は必ず付けた方が良いと思います。）

JS ライブラリの遅延読み込み

埋め込みタグを下記のように変更すると、scriptを非同期でロードして更に軽量表示する事が出来るそうです。

【 JS延期ロード＋パラメーター＋幅 】
<lite-youtube videoid="YouTubeの動画ID" params="パラメーター" style="background-image: url('https://i.ytimg.com/vi/YouTubeの動画ID/hqdefault.jpg');max-width:表示サイズ;"><button type="button" class="lty-playbtn"><span class="lyt-visually-hidden">Play</span></button></lite-youtube>

GitHub の説明には max-width:表示サイズ; という記述は有りませんが、そのままだと幅720pxで表示されるので加えました。（あとパラメーターも追加してます。^^;）

また、hqdefault の部分を下記に変更すると、サムネイルの解像度を変更する事が出来ます。

  • maxresdefault : 1280px
  • sddefault : 640px
  • hqdefault : 480px
  • mqdefault : 320px
  • default : 120px

▶ lite-youtube-embed/youtube-thumbnail-urls.md

Lite YouTube Embed のデメリット

  • スマホのブラウザはYouTubeの自動再生（autoplay=1）が使えないため、動画再生に2回タップが必要。
  • Internet Explorer11 では再生ボタンをクリックしてもプレイヤーが読み込まれない。

…だとしても、IEは何れ無くなるし「超軽い！」というメリットを考えれば利用しないのは勿体無いですよね。(^-^)
是非♪お勧めです。

FC2ブログでの注意点…と私の個人的な使い方 ^^;

FC2ブログは簡単に他のテンプレートへ変更出来ますが、変更する際に必ず </head> の上に入れた下記部分を移設して下さい。
でないと、新しいテンプレートに変更した途端 YouTube動画が見れなくなってしまいます。（サムネイル画像のみ表示。）

<link rel="stylesheet" href="https://blog-imgs-〇.fc2.com/～～～/lite-yt-embed.css">
<script src="https://blog-imgs-〇.fc2.com/～～～/lite-yt-embed.js" defer></script>
</head>

新しいテンプレートでも取り付け位置は同じ </head> の上です。
（JSのみ </body> の上でも良いのですが、バラバラにすると移設時に忘れてしまいそうなので一緒にしています。また、CSS は <head> 内というのがルールです。）

滅多に記事内に YouTube を載せない私の場合、例え <!--permanent_area-->～～<!--/permanent_area--> という個別記事のみの指定をしていても殆ど無駄な読み込みになってしまうため、

<script src="https://blog-imgs-〇.fc2.com/～～～/lite-yt-embed.js" defer></script>

だけ </head> の上から外し、YouTube を載せる記事の編集枠内最下に入れるようにしています。（JSは <body> 内の記述OK。）
この方法なら記事に YouTube を載せる時だけJSが読み込まれるので、載せていないページに無駄なリクエストが発生しません。（テンプレート変更時に移設するのはCSSのみになります。）

[Tag] * カスタマイズ * YouTube * PageSpeedInsights 
↻
 * Category：カスタマイズ
 * Comment：(2) * Trackback：(0) * △
カテゴリ:［カスタマイズ］

Comments

No Subject

頂戴しました。
凄いですね～
サクサクですよ。
YouTubeを貼るのが好きな私にはもってこいです 😀
2022-02-01-10:16 呑兵衛あな
 [ 返信 * 編集 ]▼ ▲
aki

Re: 呑兵衛あな 様へ

こんばんは。コメント有難うございます。(^^)

呑兵衛あな 様は全文表示なので、FC2のエリア変数を付けないでご利用下さい、って既にお使いならお分かりですね。^^;
ただ、記事の注意点にも有る様に「テンプレ変更の際はCSSとJSを移設」するのをお忘れ無く。

また何か良いものを見付けたら記事にしますね。(^-^)
2022-02-01-20:54 aki
 [ 返信 * 編集 ]▼ ▲





非公開コメント
▲▼