今回はこのブログでも利用している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を以下のものに変更してください。これで無駄な効果がなくなります。
以上！
この記事を書いた人
最新記事
- 2024年11月14日
「ポチップ」をなんとか「Classic Editor」で使う方法 - 2024年11月13日
【GA4】Google Analytics 4の遅延読み込み用JavaScript - 2024年11月12日
【jQueryなし】表示された画像をふわっとフェードインさせる方法 - 2024年11月8日
【JIN】WordPressの<p>タグや<br>タグの自動挿入を停止してブログカードの機能を維持する方法 - 2024年11月7日
【jQueryなし】Youtubeの埋め込み動画を遅延読込してふわっとフェードインさせる方法
