フィードの動画が2回再生されるのはなぜ？ YouTubeの二重読み込みを修正する方法

「二重読み込み」は、フィードの所有者のほとんどが経験することのない現象です。しかし、埋め込まれたYouTubeフィード内の動画をクリックして、2回読み込まれるのを目撃したことがある方や、見たいプレイヤーの横に2つ目のプレイヤーが表示されたことがある方なら、それが単なる気のせいではないこともお分かりでしょう。これは毎回、同じページ上で発生します。ランダムな不具合が、これほど繰り返し起こることはありません。

朗報です。「珍しい」からといって「未知」というわけではありません。この問題には明確な原因があり、設定レベルでの修正が可能です。コードの変更も、再ビルドも、開発者の手も必要ありません。

この症状について見かけるアドバイスのほとんどは、YouTubeアプリやブラウザの拡張機能に関するものですが、まさにそれが、何時間も検索しても解決しなかった理由です。自分で埋め込んだフィードの場合、問題は異なり、解決方法も異なります。

以下では、この「2倍表示」の原因、画像ギャラリーに手を加えずにテーマとプラグインのどちらが原因かを特定する方法、そしてこの現象を防ぐための2つの設定について解説します。

この記事の中で

フィードの動画が2回読み込まれるのはなぜですか？

フィードのJavaScriptによって、動画プレーヤーが2回起動しています。ページ上の何かが2回目の起動を引き起こしています。通常、ページが読み込まれた後にAJAXでコンテンツを読み込むテーマや、実行順序が間違っているスクリプトが原因です。これはYouTubeの設定の問題ではなく、ご自身のページ内でのスクリプトの競合によるものです。

修正手順は以下の通りです（順不同）：

1. 「YouTube Feed Pro」を更新してください。この種の不具合は、過去のリリースで修正済みです。
2. デフォルトのテーマでテストしてみてください。これにより、原因がテーマにあるかどうかがわかります。
3. YouTube Feed の「設定」»「詳細設定」で、「AJAX テーマ読み込みの修正」を有効にしてください。
4. 倍増が続く場合は、「ヘッダーにJavaScriptをキューに入れる」を有効にしてください。
5. フィード自体のキャッシュから順にキャッシュをすべて消去し、シークレットウィンドウで再度確認してください。

動画が2回読み込まれるとき、実際には何が起きているのか

フィードのJavaScriptは、ページが読み込まれた際に一度だけ動画プレーヤーを生成します。その後、ページ上の何かがその同じスクリプトを再度実行してしまうため、本来は1つだけあるはずのプレーヤーが2つになってしまっています。

最も一般的な引き金は、ページのレンダリングが完了した後に、AJAXを使ってコンテンツを読み込むテーマです。フィードが生成され、テーマがそのコンテンツを読み込み、さらにフィードが再度生成されます。同じスクリプトが2回実行され、2つのプレーヤーが生成されることになります。

これはほとんどの場合、YouTube側の問題ではなく、あなたのページ側の問題です。これを確認する一つの方法は、もし原因がYouTube側にあるなら、同じ動画がここだけでなく、表示される場所すべてで二重に表示される傾向があるはずだということです。

実際には、ページを読み込むたびに、あるサイトのあるページに表示されます。

もうひとつ知っておくべきことは、ここで起こっている問題は、皆さんが想像しているような「不具合」ではないということです。プラグインもテーマも正常に動作しており、単に特定のページにおいて、両者の実行順序が互いに干渉し合っているだけなのです。

だからこそ、解決策はトグルスイッチなのです。スクリプトの動作内容そのものではなく、スクリプトが読み込まれるタイミングを変更しているのです。この点が、人々を最も驚かせる部分だと気づきました。これほど奇妙な現象だと、開発者の手が必要だと感じてしまうからです。しかし、そうではありません。

まずはプラグインを更新しましょう — これは診断作業であり、単なる雑用ではありません

設定を変更する前に、YouTube Feed Pro を更新してください。「プラグイン」＞「インストール済みプラグイン」に移動し、更新が待機している場合は更新を行ってください。

これは単なるお決まりのアドバイスではありません。ルールを更新するだけで、すでに修正済みのプレイヤー関連のバグのカテゴリー全体がワンクリックで解消されるため、いずれにせよ何かを学ぶことができるのです。

倍増が止まれば、これで完了です。止まらない場合は、リストの中から最も簡単な原因を排除できたことになるので、テーマの検証に進むことができます。

この実例が、YouTube Feed Proの変更履歴に見られます。あるアップデートにより、Smash BalloonのYouTubeフィードとElementor独自の動画ウィジェットを同じページで併用した際に発生していた問題が修正されましたが、それらのページでは一部のフィード機能が引き続き制限されています。

これは、あなたが直面している問題と同じようなものです。1つのページ上でプレイヤーを生成する2つのスクリプトが互いに干渉し合い、プラグインの更新によって解決されるというものです。だからこそ、この手順を最初に実行する必要があるのです。

Elementorでページを作成している場合は、この競合について詳しく確認してみる価値があります。ElementorでYouTube動画が再生されない問題に関する当社のガイドでは、ページビルダーのスクリプト競合についてさらに詳しく解説しています。

アップデートが役に立たなかったと判断する前に、ひとつ確認してほしいことがあります。キャッシュを消去し、シークレットモードのウィンドウでページを再読み込みしてから、もう一度確認してみてください。

古いページの保存済みコピーを見ていたために、実際に機能している修正を「効果がない」と決めつけてしまう人を、これまでたくさん見てきました。キャッシュプラグイン、ホスティングサービス、ブラウザのいずれもがページの過去のバージョンを保持しており、そのいずれかによって、すでに解決済みの問題が依然として表示されているように見えてしまうことがあるのです。

テーマの問題かプラグインの問題かを見分ける方法

デフォルトのテーマを使ったテストを行えば、約5分でこの質問に答えることができます。

まずこちらをお読みください。多くの人がテストを実行するのをためらう原因となっている点ですが、テーマを切り替えてもフィードの設定には影響しません。フィードの設定はプラグインのデータベース内に保存されています。元のテーマに戻せば、フィードは以前とまったく同じ状態――レイアウトも、動画も、オプションも――のままです。

テストは以下の通りです：

1. ステージングサイトがある場合は、そこでこの作業を行ってください。ない場合は、トラフィックが少ない時間帯を選んでください。
2. 「外観」＞「テーマ」に移動し、「Twenty Twenty-Five」に切り替えてください。お使いの環境で動作しない場合は、代わりに「Twenty Twenty-One」を使用してください。

3. フィードが表示されたページを読み込み、動画をクリックしてください。
4. 倍増が止まった場合は、テーマが原因です。もし倍増が続く場合は、ページ上の別の要素が原因です。いずれにせよ、次のセクションにある修正方法に従ってください。

その後、自分のテーマに戻してください。これがテストのすべてです。

ちなみに、これをスマートフォンでしかご覧になっていない方へ。タッチデバイスでは、タップとクリックが別々のハンドラとして認識されることがあるため、モバイルでは動画が二重に再生されることがありますが、ノートパソコンでは正常に動作します。

その場合は、上記のテストではあまり参考にならないため、以下の設定の修正方法に進んでください。

もうひとつ、皆さんが真っ先に確認する点なのでお伝えしておきますが、テーマのライトボックスを無効にする必要はありません。画像ギャラリーは問題なく表示されます。

テーマの競合が確認された場合は、サイト内の他の場所では使用している機能を無効にするのではなく、プラグインの設定を変更することで解決します。

テーマの競合をテストする方法についてより詳しく知りたい場合は、テーマ変更後にフィードが機能しなくなった場合の対処法に関するガイドをご覧ください。そこでは、同じ手順についてさらに詳しく解説しています。

二重読み込みを防ぐ2つの設定

この修正は、YouTubeフィード » 設定 » 詳細設定にあります。そして、ここがすべてを変えるポイントです。両方のトグルは、デフォルトでオフになっています。このタブを開いたことがない場合は、まだこれらの機能を無効にしていないことになります。

これこそが、「あらゆる手を尽くした」というのと、「実際に問題を解決できる方法をまだ試していない」というのの違いなのです。

その2人は、それぞれ異なる仕事をしている。

注文	切り替え	機能	デフォルト
1	「AJAXテーマの読み込みに関する修正」	ページの初回読み込み後にフィードコンテンツを読み込むテーマを扱います	オフ
2	「ヘッダーにJavaScriptを追加する」	フッターではなくヘッダーにプラグインのJavaScriptファイルを読み込む	オフ

一つずつ順番に片付けていきましょう。

まず 「AJAXテーマ読み込みの修正」を有効にしてください。「変更を保存」をクリックし、キャッシュをクリアしてから、ページを再読み込みして動画を1つクリックしてください。

倍増が止まったら、完了です。2つ目のトグルはそのままにしておいてください。

それでも問題が解決しない場合は、このページに戻って「ヘッダーにJavaScriptをキューに入れる」をオンにしてください。保存し、キャッシュをクリアしてから、同じ手順で再度確認してください。

両方を一度に設定変更したくなる衝動は抑えたほうがいいでしょう。そうしたい気持ちはわかりますが、もし倍増が止まったとしても、どちらの設定が原因だったのかわからなくなってしまいます。その後、サイト上で何か他の変化があった場合、原因を推測することになってしまいます。

これらはいずれも、単純なオン／オフスイッチです。結果が気に入らない場合は、再びオフにすれば、サイトは元の状態に戻り、フィードのレイアウト、設定、動画もすべてそのまま維持されます。書き換えられることも、永続的に変更されることも、失われるものもありません。

特筆すべき既知の相互作用が1つあります。AJAX修正機能を有効にした際にライトボックスがページの下部に表示されるようになり、かつ同意取得にBorlabs Cookieを使用している場合、この組み合わせについてはドキュメントに記載されています。

GDPRの設定は「フィード」タブにあり、「自動」に設定されています。

「カスタムスタイリングはどこで設定すればいいのか」と疑問に思われるかもしれませんが、子テーマを編集する必要はありません。YouTube Feed Pro には、「YouTube Feed」＞「設定」＞「フィード」＞「カスタムコード」に、「カスタム CSS」と「カスタム JavaScript」のフィールドが用意されています。

YouTube Feed Proは、まさにこのような問題を解決するために開発されました。通常なら開発者を雇わなければならないようなスクリプトのタイミングの競合も、10秒でオンにできるトグルスイッチ一つで解決できるのです。

キャッシュを正しい順序でクリアする

正しく修正された場合でも、修正に失敗したように見えることがあります。トグルを切り替えてページを再読み込みすると、動画が再び二重に表示され、設定が効かなかったと判断してしまうかもしれません。しかし、実際には、以前のページの保存されたコピーが表示されているだけなのです。

内側から外側へと処理を進めてください。最初にブラウザのキャッシュを消去しても、その下のレイヤーではまだ古いデータが保持されたままなので、ブラウザはそこから古いデータを再取得してしまうだけです。

1. YouTubeフィードの「設定」→「フィード」で、「すべてのキャッシュを消去」を選択し、フィード独自のキャッシュを消去してください。
2. キャッシュプラグインのキャッシュを消去してください。
3. ホストのキャッシュをクリアしてください。
4. CDNのキャッシュをクリアしてください。
5. ブラウザの履歴を消去してください。
6. プライベートウィンドウでページを再読み込みし、動画を1つクリックしてください。

この最後のステップが重要です。プライベートウィンドウでは、ブラウザにすでに保存されている情報は無視されるため、初めてそのページにアクセスしたユーザーが目にするのと同じ状態でページが表示されます。

フィードは、同じ「フィード」タブでデフォルトで「1時間ごと」に設定されているスケジュールに従って自動的に更新されます。キャッシュをクリアすると、そのタイマーがリセットされ、すぐに最新のコンテンツが取得されます。

よくある質問

YouTubeの動画をクリックすると、なぜ2回再生されてしまうのですか？

動画が2回再生されるのは、フィードのJavaScriptが同じページ上でプレイヤーを2回初期化しているためです。通常、この現象の原因は、ページのレンダリングが完了した後にAJAXでコンテンツを読み込むテーマにあります。そのため、フィードが一度構築された後、再度構築されてしまうのです。この現象は、YouTube Feed » 設定 » 詳細設定にある「AJAXテーマ読み込みの修正」と「ヘッダーでJavaScriptをキューに入れる」という2つのトグルを有効にすることで防ぐことができます。

プラグインを更新すれば、動画の二重読み込みの問題は解決しますか？

プラグインを更新すると、動画が二重に読み込まれる問題が解決することが多く、まずはこれを試してみてください。YouTube Feed Proの変更履歴には、Smash BalloonのYouTubeフィードとElementor独自の動画ウィジェットを同時に使用した場合の修正が含まれています。これは、1つのページ上で2つのプレーヤーが競合するという、既知の問題でした。設定を変更する前に、「プラグイン」＞「インストール済みプラグイン」に移動し、更新を行ってください。

これはバグなのでしょうか、それとも自分で設定できるものなのでしょうか？

その両方ですが、これは朗報です。というのも、どちらの要因も開発者の対応を必要としないからです。バグによる問題はより簡単に対処できます。過去のプラグインのバージョンにはプレーヤー関連のバグがありましたが、それらはすでに修正されているため、更新を行うだけで解決します。残りの問題はスクリプトの競合ですが、これは「詳細」タブにある2つの設定で自分で制御できます。どちらの設定も、デフォルトではオフになっています。

テーマのライトボックス機能を無効にすれば問題は解決しますか？また、それによって画像ギャラリーが正常に表示されなくなることはありますか？

テーマのライトボックスを無効にする必要はありませんので、画像ギャラリーは問題ありません。二重読み込みの修正はプラグインの設定によるものであり、テーマの機能を無効にする必要はありません。サイトの他の場所では、ライトボックスは現在とまったく同じように動作し続けます。

これは、私の動画が自動再生されないのと同じことですか？

いいえ、自動再生は別の問題であり、別の解決策が必要です。動画がクリック時に再生されるか、自動的に再生されるかは、「カスタマイズ」＞「動画体験」＞「動画はいつ再生されますか？」で設定されており、これは二重読み込みとは関係ありません。動画が自動的に再生されない場合は、YouTubeの埋め込み動画の自動再生が機能しない場合の対処法に関するガイドをご参照ください。

なぜ、私のスマホでは起こるのに、ノートパソコンでは起こらないのでしょうか？

ダブルロードはスマートフォンだけで発生することがあります。これは、タッチ操作対応デバイスでは、タップとクリックが別々のハンドラーとして認識されることがあり、その結果、プレーヤーの初期化が2回実行されてしまうためです。これはまれな現象であり、モバイル向けに個別に変更できる設定はありません。まずは「YouTubeフィード」＞「設定」＞「詳細設定」にある2つの切り替えスイッチを同じ設定にして、スマートフォンのプライベートブラウジングウィンドウで再度確認してください。

一度だけ、本来あるべき姿で再生される動画

ダブルロードはYouTubeの問題ではありません。これはご自身のページにおけるスクリプトのタイミングの競合によるもので、再構築ではなく設定の切り替えで修正できます。

以下に、手順を順を追ってすべて示します：

1. 「プラグイン」＞「インストール済みプラグイン」で「YouTube Feed Pro」を更新してください。
2. デフォルトのテーマでテストを行い、問題の原因がご自身のテーマにあるかどうかを確認してください。
3. YouTube Feed の「設定」»「詳細設定」で、「AJAX テーマ読み込みの修正」を有効にしてください。
4. それでも倍増し続ける場合は、「ヘッダーにJavaScriptをキューに入れる」を有効にしてください。
5. キャッシュを徹底的に削除してから、シークレットウィンドウで再度確認してください。

動画がまったく再生されない場合は、別の問題となります。WordPressで動画が再生されない場合の対処法ガイドでは、より幅広い原因について解説しています。

先ほど使用した「詳細」タブでは、フィードのその他の動作も制御できます。YouTube Feed Pro にはこれらの設定が用意されているため、スクリプト間の競合が発生しても、2分で切り替えられます。

二重読み込みを完全に解消したいと思いませんか？「YouTube Feed Pro」を導入して、フィードを自分の設定通りに再生し続けましょう。