YouTube複数埋め込みの表示高速化と注意点【プラグインなし】

ブログにYouTubeをいっぱい埋め込んだら重くなった…。

何か良い方法はないかなぁ？

こういった疑問に答えます。

本記事の内容

複数のYouTube動画を埋め込んだページの表示速度を上げるテクニック

この記事を書いている僕はWEB制作で食べていて、実際に当ブログにも取り入れています。

本記事のテクニックは、プラグインを使ったり、xxx.phpをイジったりしない方法なので安心です。

ぜひコピペして使ってくださいー！

YouTube複数埋め込みの表示高速化と注意点【プラグインなし】

YouTube複数埋め込みの表示高速化と注意点【プラグインなし】

カンタン4ステップ

画像とiframeの遅延読み込みプラグインを停止する
記事の一番上にJSコードをペーストする
埋め込みたいYouTube動画からコードをコピーしてくる
src=""の中身をdata-src=""にペーストする

【注意点】画像とiframeの遅延読み込みプラグインを停止する

さっそく注意点ですが、画像とiframeの遅延読み込みプラグインを有効化していると今回の機能は使えません。

私は『BJ Lazy Load』を使用していたため、2つ目以降のYouTubeが表示されなくなりました。

下記を実装したのに機能しない場合はまず、プラグインを疑ってください。

記事の一番上にJSコードをペーストする

『テキストエディタ』にペーストするJavaScript

まず、上記コードをYouTube動画を複数埋め込んだ記事の『テキストエディタ』の一番上にコピペしてください（このコードは1記事に対して1回だけペーストすればOKです）。

複数とは2つ以上と考えてください。1つしか埋め込んでいない場合は不要です。

header.phpに記述すれば記事毎にペーストする必要はないのですが、『YouTubeを複数埋め込む記事がほとんど』という方以外は今回のように記事毎にコピペしてあげればOKです。

埋め込みたいYouTube動画からコードをコピーしてくる

『テキストエディタ』にペーストするHTML（通常ver.）

<iframe width="560" height="315" src="https://www.youtube.com/embed/m_ZuOHx3NKQ" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

※『src=""』の中身は埋め込みたい動画によって変わります。

次に、ブログに埋め込みたいYouTube動画にアクセスします。

（評価ボタンの横の）共有 › 埋め込む › コードをコピー

コピーしたコードを『テキストエディタ』にペーストします。

※『frameborder="0"』属性は現在廃止されているので削除してもOKです。

src=""の中身をdata-src=""にペーストする

『テキストエディタ』にペーストするHTML（高速化ver.）

<iframe width="560" height="315" src="" data-src="https://www.youtube.com/embed/m_ZuOHx3NKQ" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

data-src=""を新たに記述して、その中にsrc=""の中身をカット＆ペーストします。

src=""は空のまま残してください。

上記を埋め込みたい動画ぶん実装していけばOKです。

YouTubeを幅100%で埋め込む方法【レスポンシブ対応】

また、この時にYouTube動画を記事の横幅100%に広げるためのクラスを付与したdivタグで囲ってあげると尚良しです。

『追加CSS』にペーストするCSS

.iframe-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* アスペクト比16:9の場合 */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    margin-bottom: 2rem; /* YouTubeの下に余白をつける */
}
.iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

『テキストエディタ』にペーストするHTML

<div class="iframe-wrapper"><iframe width="560" height="315" src="" data-src="https://www.youtube.com/embed/m_ZuOHx3NKQ" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

詳しくは別記事にまとめています。