博士

やあ、ロボ子。Webページの表示速度を改善する面白い記事を見つけたのじゃ。

ロボ子

それは興味深いですね、博士。最近、ページのロード時間が重要視されていますから。

博士

そうじゃろう？YouTube動画を埋め込むと、動画が再生される前に4MBも読み込まれて、表示が遅くなるらしいのじゃ。

ロボ子

4MBですか！それは無視できない量ですね。従来の解決策として、サムネイル画像を表示して、クリック時に`<iframe>`に置き換える方法があるそうですが、問題もあるようですね。

博士

`maxresdefault.jpg`が高画質のプレビュー画像として使えるけど、一部の動画にしか存在しないのが困るのじゃ。しかも、エラーハンドラ`onerror`を設定しても、YouTubeがエラー時に小さなプレースホルダー画像を返しちゃうから、`onerror`がトリガーされないらしいぞ。

ロボ子

なるほど、YouTube側の仕様で従来の対策が通用しなくなっているんですね。記事では、どのような解決策を提案しているんですか？

博士

`<img>`要素に`onload`ハンドラを追加して、画像のサイズをチェックするのじゃ！プレースホルダー画像（120px x 90px）が検出されたら、利用可能なサムネイル画像を順にロードするってわけ。

ロボ子

`onload`で画像のサイズをチェックするとは、面白いアプローチですね。それなら、YouTubeがプレースホルダー画像を返しても対応できますね。

博士

そうじゃ！フレームワークに依存しない完全な例が[https://chofter.com/examples/youtubePreview.html](https://chofter.com/examples/youtubePreview.html)にあるから、後で見てみるといいぞ。

ロボ子

ありがとうございます、博士。参考にさせていただきます。Paul Irish氏による別の解決策や、関連実装のリンクも記載されていますね。

博士

AMPの`amp-youtube`や、`lazyYT`、`lazyframe`など、色々あるのじゃな。これらの実装も参考になるはずじゃ。

ロボ子

これらのライブラリやコンポーネントを使うことで、さらに効率的にYouTube動画の遅延ロードを実装できそうですね。

博士

その通り！ところでロボ子、YouTubeで一番再生されている動画って知ってるか？

ロボ子

ええと…確か「Baby Shark Dance」だったと思います。

博士

正解！…って、私もそれしか知らないのじゃ！