今回はこのブログでも利用しているYouTube動画の遅延読み込みスクリプトを紹介します(具体的な動作はトップページを御覧ください)。
現状YouTube動画の埋め込みに使われる「iframe」も自動的に遅延読み込みされているのですが、ページの上部にある動画の場合それが効かないことがあり、そんなことなら全部自前で遅延読み込みしてしまえば良いということで、Chat GPTと格闘しながら作ったスクリプトになります。個人的にあまり「jQuery」に依存したくなかったので、「jQuery」なしでも動作するようにしています。
基本的には動画のIDを取得して、それを記述したHTMLを動画を挿入したい場所に設置し、JavaScriptでそれをコントロールすることになります。また、ここで最初に紹介するスクリプトは、YouTube動画をふわっとフェードインさせる機能もあるので、それに伴いCSSも必要になります。
また、すでに動画を埋め込んだページがたくさんある場合、HTMLを変更するのが手間だと思いますので、iframeのタグを自動で必要な形に変換するPHPも紹介します。
YouTubeの埋め込み動画を遅延読み込みコード
HTMLと変換用PHPスクリプト
まず、下に表示されているHTMLを動画表示したい場所に設置します。
その際、「YOUR_VIDEO_ID」となっている場所をYouTubeの動画IDに書き換えます。例えば、
https://www.youtube.com/watch?v=ivP7Q9qGoC0
となっていたら、上の赤い部分を取り出して、「YOUR_VIDEO_ID」の部分に書き込みます。
「Classic Editor」の場合はテキストタブでそのまま入力、「ブロックエディタ(Gutenberg)」の場合は「カスタムHTML」に書き込んでくれればOKです。
ただ、これだと少々面倒ですし、すでに複数のページでYouTube動画を埋め込んでいる場合修正が面倒です。以下のPHPを「function.php」に書き込めばURLを記入するだけで勝手に必要な形に整形してくれます。
これも「Classic Editor」、「ブロックエディタ(Gutenberg)」のどちらでも動作します。
JavaScript
必要なJavaScriptは以下のものになりますので、コピーして「</body>」の直上に設置してください(実際には場所はどこで構いません)。また、全く需要はないと思いますが、下のコードの赤字になっている「autoplay=0」を「autoplay=1」にすると動画が自動で再生されるようになります。
私と同じテーマ「Jin」を使っているなら「HTMLタグ設定」の「【bodyタグの終わり】」に記述すればOKです。
CSS
最後はCSSですが、下に表示されているものを「追加CSS」に記述すればOKです。
ふわっとフェードインしないバージョン
JavaScriptとCSS
YouTubeの埋め込み動画のフェードイン効果がいらないという場合は、JavaScriptとCSSを以下のものに変更してください。これで無駄な効果がなくなります。
以上！
この記事を書いた人
最新記事
あなたのジブリ愛、知識、観察力そして集中力を試す楽しいクイズゲーム。様々な種類の難問を素早く解いてランキングに登録！上の画像をクリックするとゲームページに飛びます。
