京都のホームページ制作会社 株式会社ズコーデザイン

2021/02/03

かとう

BLOG

pagespeedinsightsで『レンダリングを妨げるリソースの除外』する　#4

YOUTUBEの埋め込みコードを遅延ロードする

YOUTUBEの埋め込みコードを使用しているページで、『第三者コードの影響を抑えてください』を解消する方法を紹介します。

やりたいこと

・再生ボタンが押されるまで<iframe>を読み込まない

・<iframe>を読み込むまでサムネイル画像を表示する

おまけ

・YOUTUBE以外(再生ボタンが無い)の<iframe>を遅延ロードさせる

HTML

また、再生ボタンが押されるまで、ページに何も表示されないので、代わりのサムネイル画像と再生ボタンを前面に表示しています。

読み込みが始まると、<iframe>を前面に表示し、IFrame Player APIを使って再生を開始します。

おまけで、YOUTUBE以外の<iframe>だった場合は、[data-src]の内容を[src]に入れ、読み込みを開始します。

HTML

CSS

JS