youtube埋め込み高速化のためのメモ

考え方とかパーツとか。

埋め込みは便利だけどデメリットもある
高速化の構想と条件
構築に使うURLとか
構築イメージ
1. 自動再生はどうすんの
2. 拡張性
まとめ

埋め込みは便利だけどデメリットもある

簡単な話。

WEBサイト（ページ）のクオリティ診断基準のひとつに読み込みの速度がある。

Youtubeを埋め込むと遅くなる。

高速化の構想と条件

なんで遅くなるかって、動画を読み込んでるのが原因。

高速化というのはページにアクセスして表示が完了するまでの時間が関わるので、その後に読み込む分には何も問題ないよね、ということになる。該当箇所をクリックしたときにiframeを出力して再生させたらいいという感じに。

動作的には、普通に埋め込んだ場合はサムネイルが表示されていてクリックしたら再生する。なので、例えば最初は画像（サムネ）を表示させておいて、クリックしたらiframeを出力（+自動再生）すれば操作的に違いはないですね。

構築に使うURLとか

目についたこの動画をサンプルにやっていくとする。

共有URL

https://youtu.be/RT0hj02Aokc

埋め込み

<iframe width="560" height="315" src="https://www.youtube.com/embed/RT0hj02Aokc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

埋め込みの肝になる動画のURL

https://www.youtube.com/embed/RT0hj02Aokc

サムネイル

120x90
https://img.youtube.com/vi/RT0hj02Aokc/default.jpg
320x180
https://img.youtube.com/vi/RT0hj02Aokc/mqdefault.jpg
480x360
https://img.youtube.com/vi/RT0hj02Aokc/hqdefault.jpg
640x480
https://img.youtube.com/vi/RT0hj02Aokc/sddefault.jpg
1280x720
https://img.youtube.com/vi/RT0hj02Aokc/maxresdefault.jpg

ID部分を置換すれば他の動画に対応できる。

構築イメージ

以下の2つを抑えておく必要がある。

動画のID取得
設置位置

これをどうやって指定するか。wpとかの記事内であれば通常の埋め込みコードを貼って、記事情報をphpで処理してから出力してしまえばいいのでどうとでもできる。そういうのじゃない場合はjsなど後付の処理しかできないので、iframeである埋め込みコードは使えない。

ということで、削りに削ってこんな感じになるんじゃないかなって。

<div class="youtubeFastJs" data-url="https://youtu.be/RT0hj02Aokc"></div>

複数設置を考えて、idじゃなくてclassを付ける。

urlはdataで登録する。サムネのサイズ指定ができるようにしてもいいけど個別の指定になるから任意に留めとくのが無難かなとか。

本当は動画IDだけあればいいんだけど使い勝手的に共有URLがボーダーラインか。動画IDはURLのパラメータからも拾えるけど不要なものも色々くっついてソースコードが汚くなるので除外したい気持ち。

自動再生はどうすんの

ページを読み込んだら勝手に再生されるやつ。

iframeを貼っちゃえよって気持ちではあるけど、高速化をしたいなら「ページの読み込みが完了したらiframeを出力して再生する」をやっていくことになる。

JavaScriptをページ読み込みの任意のタイミングで実行。

ブラウザがサーバーからレスポンスを受け取ったあと、ページ読み込みが完了するまでの間のJavaScriptの実行タイミングの指定方法。忘れるのでメモ。 DOMの解析の途中で任意に実行する。 ...

読み込みが終わったら処理！onloadイベントの使い方と注意点について解説【JavaScript】 | SPIQA NOTE

JavaScriptのonloadイベントについて解説します。HTMLや画像などのリソースを読み込んでからスクリプトを実行したい時に使用します。非常によく使うイベント処理です。同じく読み込んでから処理を行うDOMContentLoadedイ...

通常の埋込と差別化するためにclassなりdataなりを仕込まないといけない。classだと他との競合があると怖いのでdataが無難か。

<div class="youtubeFastJs" data-url="https://youtu.be/RT0hj02Aokc" data-autoplay="true"></div>

拡張性

サムネの件、自動再生の件、考えてたら色々出てくる。そうするとdata属性でやっていくよりも一般的なjQueryのプラグインやらjsのライブラリやらと同じようにjs側でオプションを指定して制御するのが良さげな気がしてきた。どうなんですかね。

まとめ

やることはさして難しくない感じなんで、時間があれば作れると思う。

というか、パッケージされたものは既にあると思うんで、探してきて使うのが手っ取り早いかも。

そこまで込み入ってないから自分で作ったほうが融通が効いていいかもしれない、みたいな感じ。