完璧な YouTube Core Web Vitals

YouTube 動画を埋め込む方法（遅い方法）

YouTube ではページへの動画の埋め込みがとても簡単になっています。まず動画ページに移動し、動画の下にある共有ボタンをクリックします

次に埋め込みを選択し、埋め込みコードをコピーします：

コードをコピーしてサイトの HTML に貼り付けます。その後 Lighthouse 監査を実行すると、First Contentful Paint、Speed index、Largest Contentful Paint、Time to interactive などの重要な指標が約 1 〜 1.5 秒増加していることに気づくでしょう。これを修正しましょう：

デフォルトの YouTube 埋め込み

スマートな YouTube 埋め込み

YouTube の Core Web Vitals を修正しよう！

画像のプレースホルダーを作成して Core Web Vitals を修正します。ページ読み込み中はプレースホルダーが表示されます。実際に YouTube 動画が必要になった時にのみ、プレースホルダーを実際の動画に置き換えます。

ステップ 1：プレースホルダー画像をダウンロード

プレースホルダー画像のダウンロードはとても簡単です。YouTube 動画の URL を確認してください。この例では次の URL を使用します：https://www.youtube.com/watch?v=Oxv6IRcuNaI

お気づきのように、URL には変数があります：「Oxv6IRcuNaI」。この変数をコピーして、YouTube 動画のデフォルト画像の場所に貼り付けます https://i.ytimg.com/vi_webp/Oxv6IRcuNaI/maxresdefault.webp

その URL を開き、画像を右クリックして「名前を付けて画像を保存」を選択します。画像をダウンロードしたら、必要に応じてリサイズしてください。

ステップ 2：プレースホルダーを作成

次のステップはプレースホルダーの作成です。相対位置指定の div を使用し、object-fit:cover の画像と、後で内容を設定する空の iframe を配置します。

<div id="ytplaceholder">
   <img class="ytcover"
        loading="lazy"
        src="https://i.ytimg.com/vi_webp/Oxv6IRcuNaI/maxresdefault.webp">
   <iframe 
       id="ytiframe" 
       data-src="https://www.youtube.com/embed/Oxv6IRcuNaI">
   </iframe>
</div>

ここまでは順調です。次にスタイリングを追加しましょう。YouTube プレースホルダーの padding は、動画がすべてのデバイスで適切にスケールするためのテクニックです。画像は absolute で上部に配置され、object-fit:absolute プロパティを持っています。これは背景画像を模倣しつつ、遅延読み込みとレスポンシブ画像を可能にします。最後に、iframe 自体も absolute 位置で、表示された時にプレースホルダー全体を覆います。

#ytplaceholder {
    position: relative;
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

#ytplaceholder img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    object-fit: cover
}

#ytplaceholder iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    opacity: 0;
    transition: opacity 2.4s ease 0s;
}

ここからが本題です：プレースホルダー画像を実際の動画に置き換えましょう。YouTube プレースホルダーにイベントリスナーを追加します。訪問者が画像の上にマウスを置くと、YouTube iframe が読み込まれ、opacity の変更により表示されます。

<script>
// youtube placeholder
var ytplaceholder = document.getElementById ('ytplaceholder'); 

// change the video
var videolistner = function(e) {
   var ytiframe = document.getElementById('ytiframe');
   ytiframe.src = ytiframe.getAttribute('data-src');
   ytiframe.onload = ytiframe.style.opacity = 1;
   ytplaceholder.removeEventListener("mouseover", videolistner);
};

//listen to the mouseover event to change the video
ytplaceholder.addEventListener('mouseover', videolistner);

常に YouTube 動画を表示する

さらに一歩進んで、インタラクションなしでもプレースホルダー画像を常に YouTube 動画に置き換えるようにしましょう。すぐに行うのではなく、ブラウザがアイドル状態になるまで待ちます。ここではシンプルにタイムアウトを使用しますが、requestIdleCallback() メソッドも優れた選択肢です

<script>
var ytplaceholder = document.getElementById ('ytplaceholder'); 

var videolistner = function (e) { 
   var ytiframe = document.getElementById ('ytiframe'); 
   ytiframe.src = ytiframe.getAttribute ('data-src'); 
   ytiframe.onload = ytiframe.style.opacity=1; 
   ytplaceholder.removeEventListener ("mouseover", videolistner); 
   }; 

ytplaceholder.addEventListener ('mouseover', videolistner);   

// show the YouTube video anyway after 3 seconds
setTimeout(function(){
   videolistner();
},3000);
</script>

これで完成です。わずか数行のコードで、YouTube 動画を埋め込みながら完璧な PageSpeed スコアを達成できます。

このテクニックを拡張する

もちろんこれは、特定の ID を持つ単一の YouTube 動画にのみ対応するシンプルな例です。実際のサイトでは、querySelector にイベントリスナーを設定し、スクロールして表示される前に YouTube 動画を自動的に読み込む intersection-observer も追加するのが良いでしょう。どのように拡張するにしても、基本的な考え方は同じです！