ElementorのYouTube動画があなたのサイトで動作していませんか？
YouTubeの埋め込みが機能しなくなる原因として、Elementorプラグインのバージョンが古くなっていること、サードパーティ製の最適化プラグインやキャッシュプラグインとの競合、およびテーマレベルのスクリプトエラーなどが考えられます。
原因が何であれ、これはWordPressユーザーにとってよくある問題であり、対処するのは非常に厄介です。
この包括的なガイドでは、ElementorでのYouTube埋め込みを修正するための最も効果的なトラブルシューティング手順を順を追って解説します。
また、サイトにYouTube動画を表示するための、より信頼性が高く、パフォーマンスに配慮した方法もご紹介します。
- まず：YouTubeの埋め込みが機能していないのか、それとも単にキャッシュの問題なのか？
- ElementorでYouTube動画が動かないのを直す方法
まず：YouTubeの埋め込みが機能していないのか、それとも単にキャッシュの問題なのか？
設定を変更する前に、動画が本当に再生できない状態なのかを確認し、すぐに試せる簡単な対処法がないか確認してください。
「シークレットモード」テストを確認する
多くの場合、YouTubeの動画が「再生できない」ように見えるのは、管理者としてログインしている状態や、ブラウザのローカルキャッシュが原因です。
- ブラウザでシークレットウィンドウを開く
- 実際のURLにアクセスしてください（Elementorエディタではなく）
ここで動画が再生されるなら、あなたのサイトと動画の埋め込み設定に問題はありません。
サイトのキャッシュ（WP Rocket、LiteSpeedなど）とブラウザのキャッシュをクリアするだけで大丈夫です。
編集者限定のエラー
Elementorエディター内でのみエラーが表示されるものの、公開サイトでは動画が正常に再生される場合は、これは既知のセッション競合です。
「Elementor」»「設定」に移動し、「詳細」タブをクリックします。
「Switch Editor Loader Method」というオプションを探して、有効にしてください。
これにより、Elementorによるプレビューの読み込み方法が変更され、通常は接続ブロックが回避されます。
それでも動画の埋め込みが機能しない場合は、以下の完全ガイドをご覧ください。
ElementorでYouTube動画が動かないのを直す方法
Elementorのウェブサイト上でYouTube動画を修正するためのさまざまな手順を説明します。
ステップ1: Elementorのバージョンを更新する
Elementorの最新バージョンを使用していない場合、ビデオウィジェットのような一部の機能がウェブサイト上で正しく動作しない可能性があります。
これを解決するには、Elementorのバージョンを更新すればよい。
まず、WordPressのダッシュボードからプラグイン " インストール済みプラグインメニューに移動し、リストにあるElementorプラグインを探します。
プラグインのアップデートを促すメッセージが表示されたら、「今すぐアップデート」 ボタンをクリックします。
プラグインが更新されるまで数秒待つと、Elementor上で動画が再生されているかどうかを確認できます。
おまけとして、自動更新を有効にするボタンをクリックすると、このプラグインを常に最新バージョンにすることができます。
それでも問題が解決しない場合は、ステップ2に進み、ウェブサイトのテーマを変更してみてください。
詳しくは、WordPressプラグインの更新方法をご覧ください。
ステップ 2：セルフホスト型ソースのエラーを確認する
ビデオプレーヤーに何も表示されないよくある原因は、Elementorウィジェットで間違ったソースを選択していることです。
YouTubeのリンクを使用する際、これを「セルフホスト」に設定すると、動画は読み込まれません。
まず、Elementorでページを開き、動画ウィジェットをクリックして設定画面を表示します。
左側のパネルの「ソース」ドロップダウンを確認してください。
- YouTube： YouTubeチャンネルのリンクを貼り付ける場合は、こちらを使用してください 。
- 「セルフホスト型」：このオプションは、MP4などの動画ファイルをWordPressのメディアライブラリに直接アップロードした場合にのみ使用してください。
YouTubeのリンクがあるのに、ソースが「セルフホスト」に設定されている場合は、元通り「YouTube」に変更してください。
YouTubeのプレイヤーに表示されるブランドロゴを避けたい場合は、動画を自分でホストするように設定してください。その際は、ファイルを自分のサイトにアップロードし、「セルフホスト」が選択されていることを確認してください。
ソースが動画の種類と一致したら、「更新」ボタンをクリックして変更を保存してください。
ステップ3：コンプライアンス対応のため、YouTubeのプライバシーモードを有効にする
YouTubeの動画がブラウザの拡張機能やローカルのプライバシーファイアウォールによってブロックされている場合、プライバシーモードを有効にすると、接続が回復することがよくあります。
これを有効にするには、Elementorエディター内の「Video」ウィジェットをクリックし、左側のパネルを下にスクロールしてください。
「プライバシーモード」というラベルのついたトグルを見つけ、「はい」に切り替えてください。
この設定により、訪問者が動画を再生しない限り、YouTubeは訪問者の情報を保存しないようになります。
ステップ4：Elementorで自動再生が機能しない問題を解決する
2018年以降、ほとんどの最新ブラウザ（Chrome、Safari、Firefox）では、不快な音声を防ぐため、動画の自動再生がブロックされるようになっています。
自動再生を再び有効にするには、「ミュート時の自動再生」ルールに従う必要があります。
まず、動画ウィジェットをクリックし、「動画オプション」タブに移動します。
「ビデオオプション」で、「自動再生」が「オン」になっていることを確認してください。
次に、「ミュート」も「はい」に切り替えてください。
これで、訪問者がこの投稿やページを開いた際に、動画がミュート状態で自動再生されるはずです。
ステップ5：WordPressのテーマを変更する
テーマによっては Elementor ページビルダーと互換性がないため、サイト上で動画エラーが発生する可能性があります。
解決策は？デフォルトのWordPressテーマの1つに切り替えて、動画をテストするだけです。
まず、WordPressのダッシュボードを開き、 外観 " テーマメニューに移動します。
ここで、Twenty Twenty-TwoのようなデフォルトのWordPressテーマを探し、その上にマウスを置く。
ここで「Activate」 ボタンをクリックし、テーマを切り替える。
それでは、WordPressのElementor動画が正しく動作しているか確認してみてください。
ステップ6：Elementorとのプラグインの競合を解決する
ElementorでYouTube動画が再生できない一般的な理由は、他のプラグインとの競合が原因かもしれません。
これに対処するには、WordPressのダッシュボードからプラグイン " インストール済みプラグインメニューを開きます。
ここで、左上のチェックボックスを クリックして、サイト上のすべてのプラグインを一度に選択する。
そうしたら、チェックボックスの上にあるドロップダウンメニューを使って、Deactivateオプションを選択します。
その後、右側の適用 ボタンをクリックして、ウェブサイトのすべてのプラグインを無効にすることができます。
これですべてのプラグインが非アクティブになったので、リストからElementorを探し、有効化ボタンをクリックする。
その後、YouTubeの動画が正常に動作するかどうかを確認してください。それでも同じエラーに直面する場合は、最後のセクションにスキップすることができます。
これで問題が解決したら、残りのプラグインを1つずつ有効にして、どのプラグインが問題を引き起こしているかを調べてください。
競合するプラグインを見つけたら、3つの選択肢から選ぶことができる：
- 他のページビルダー・プラグインに切り替える
- Elementorと互換性のないプラグインを削除する
- YouTube動画を表示する別の方法を使う
ステップ4に進んで、WordPressプラグインをすべて維持したままYouTube動画をサイトに埋め込む方法を学んでください。
Slider Revolutionのスクリプト競合を解決する
「Slider Revolution」がインストールされている場合、ElementorのYouTubeウィジェットの読み込みが妨げられている可能性があります。
これは、Slider Revolutionがページ全体に対して独自のYouTube APIを「強制的に適用」することが多く、それがElementorのスクリプトと競合するためです。
これを確認・修正するには、以下の手順に従ってください：
- WordPressのサイドバーから 「Slider Revolution」»「Globals」に移動します。
- 「ライブラリをグローバルに含める」または「ライブラリを含めるページの一覧」という設定を探してください。
- 「ライブラリをグローバルに含める」オプションをオフにしてください。
- あるいは、「JSをフッターに配置」が有効になっていることを確認してください。
ステップ 7: 最適化プラグインで JavaScript の遅延読み込みを無効にする
LiteSpeed Cache や WP Rocket などの最適化プラグインを使用している場合、YouTube の動画が表示されないことがあります。
これは、再生に必要なスクリプトの読み込みが遅れていることが原因ですが、修正するのはとても簡単です。
Elementorの動画スクリプトが遅延読み込みの対象から外れるように設定するだけです。
LiteSpeed Cacheをご利用のお客様へ：
「LiteSpeed Cache」»「ページの最適化」 に移動し、 「JS設定」タブをクリックします。
「JS Defer」オプションを探し、それを「Off」に設定してください。
「保存」をクリックし、ウェブサイトを再度開いて、動画が表示されるか確認してください。
動画を修正している間もこの機能を有効にしておくには、上部の「調整」タブ をクリックしてください。
ここで「JS Excludes」オプションを探し、リストに以下を追加してください：
elementor/assets/lib/video-youtube/video-youtube.js
[www.youtube.com/iframe_api](https://www.youtube.com/iframe_api)
それでは、保存してキャッシュをクリアしてから、ウェブサイトを開いて動画の埋め込みを確認してください。
WP Rocketをご利用の場合も、手順は同様です。
「設定」»「WP Rocket」»「ファイルの最適化」に移動して、プラグインの設定画面を開きます。
ここで、「 JavaScriptの実行を遅延させる」機能を無効にしてください。
これらの設定を更新したら、ウェブサイトのキャッシュを消去し、ページを更新して、動画が再生されるか確認してください。
ステップ8：YouTubeの動画フィードを作成する
上記のステップで問題が解決しない場合、簡単にできる解決策があります。
YouTube Feed Proを使えば、わずか数クリックでYouTube動画のフィードをサイトに表示することができます。
市場で最高のYouTubeフィードプラグインとして、YouTubeフィードの作成、カスタマイズ、埋め込みの全プロセスを案内するシンプルなガイドフローが付属しています。
そうすれば、YouTubeチャンネル、プレイリスト、お気に入りリスト、ライブストリームなどのコンテンツで訪問者を魅了することができる。
さらに、YouTube Feed Proは自動的にElementorウェブサイトのデザインをコピーするので、動画はブランディングに完璧にマッチします。
YouTubeの動画フィードのデザインをもっとコントロールしたいですか？
また、フィードのレイアウト、カラースキーム、ボタンのデザイン、動画の数などを変更できるライブエディターも利用できる。
このように、YouTube Feed Proを使えば、YouTubeのフォロワーを増やし、訪問者の関心を引くことがこれまで以上に簡単になります。
それでは、このプラグインを使って、Elementorサイトで動かないYouTube動画を修正する方法を見てみましょう。
ステップ1：YouTube Proプラグインのフィードをインストールする
まず、Feeds for YouTube Proをこちらから入手してください。プラグインを入手したら、あなたのサイトにインストールして有効化してください。
方法がわからない？WordPressのプラグインをインストールする方法については、こちらのステップバイステップガイドをご覧ください。
プラグインの準備ができたら、ステップ2に進み、新しいYouTubeフィードを作成します。
ステップ2：YouTube動画フィードを作成する
このプラグインを使えば、数クリックでYouTube動画のフィードを作成できる。
まず、WordPressダッシュボードからYouTubeフィード " すべてのフィード メニューを開き、新規追加をクリックします。
次に、埋め込むYouTubeフィードの種類を選択します。ここでは6つの選択肢から選ぶことができます：
- チャンネル YouTubeチャンネルを選択し、その動画を表示する
- プレイリスト YouTubeのプレイリストから動画を埋め込む
- お気に入り お気に入りとしてマークしたビデオを表示する。
- 検索するYouTubeの検索結果をウェブサイトに表示する
- ライブストリーム：新しいフィードを使用してYouTubeライブストリーミングビデオを埋め込む
- 単一のビデオ：特定の動画を選択し、サイトに表示する。
YouTubeフィードの種類を選択し、「次へ」をクリックします。
この例では、YouTubeのプレイリストフィードを使います。
YouTubeフィードの作成が完了したら、次のステップに進み、自分のアカウントも接続する。
ステップ3：YouTubeアカウントに接続する
YouTubeアカウントと接続することで、新しいフィードはあなたのウェブサイトにYouTubeのビデオを表示することができます。
そのための最良の方法は、YouTubeのAPIキーを接続することだ。
APIキーをまだお持ちではないですか？この初心者向けガイドに従ってYouTube APIキーを作成してください。
キーが手に入ったら、それをコピー し、ポップアップに貼り付けます。
最後に、AddをクリックしてYouTubeアカウントに接続します。
次に、YouTubeフィードのソースを選択します。選んだフィードの種類によって、YouTubeチャンネル、プレイリスト、お気に入りリスト、検索ワードなどがあります。
ここではYouTubeのプレイリストを例に説明する。
まず、ブラウザでプレイリストを開き、URLの最後にあるコードをコピーして ください。
そうしたら、WordPressサイトをもう一度開き、コードをプレイリストID フィールドに貼り付けます。
次に、[Next]ボタンをクリックして、ソースの追加を完了します。
このように、YouTube Feed Proを使えば、新しい動画フィードを簡単に作成し、YouTubeアカウントに接続することができます。
ステップ4では、このYouTubeフィードがElementorウェブサイト上でどのように見えるかをカスタマイズできます。
ステップ4：YouTubeフィードをカスタマイズする
YouTube Feed Proには、フィードの美しいデザインをインポートするために使用できるフィードテンプレートのコレクションが付属しています。
フィードのテンプレートは、以下の8つのオプションから選択できます：
- デフォルト
- カルーセル
- カード
- リスト
- ギャラリー
- 最新ビデオ
- ショーケース・カルーセル
- ウィジェット
テンプレートを選択したら、Nextをクリックして次に進みます。
そうしたら、ライブフィードエディターを使って、フィードを詳細にカスタマイズすることができる。
左側には、フィードのレイアウト、色、ヘッダーのスタイル、動画の数、購読ボタンなどを設定するオプションが表示されます。
右側には、YouTube Elementorフィードのリアルタイムプレビューが表示されます。
カスタマイズを開始したい場合は、左側の フィードレイアウトオプションを クリックします。
YouTubeフィードのレイアウトを4種類から選べます：グリッド、ギャラリー、リスト、カルーセルです。
以下、それぞれのレイアウトを見てみよう。
ElementorサイトにYouTube動画をたくさん表示したい場合は、グリッド オプションを選択できます。
このようにYouTubeの動画が行と列で表示される：
ギャラリーレイアウトは、YouTubeの1つの動画にフォーカスを当て、他の動画のサムネイルを小さく表示します。
あなたのサイトで特定のビデオを強調するのに最適な方法です。
YouTubeの大きな動画を1列に表示したいですか？
その場合はリストレイアウトを 使えばいい。
また、カルーセルレイアウトで YouTube動画をYouTubeスライドショーにすることもできます。
これは、訪問者があなたのウェブサイトと対話する別の方法を与えることができます。
フィードのレイアウトを選択したら、「保存」をクリックして変更を確定します。
その後、カスタマイズボタンをクリックしてカスタマイズを続けることができます。
YouTube Feed Proを使えば、YouTubeフィードの色を設定することもできます。
そのためには、左の配色 オプションをクリックします。
YouTubeフィードの配色を4種類から選べるようになりました：
- テーマから継承します： Elementorウェブサイトの色をコピーする
- 明るい：明るい背景と暗いフォントのフィードを選ぶ。
- Dark:明るい色のフォントの代わりに暗い色の背景を表示します。
- カスタム：手動ですべての色を選ぶ
カラースキームを選択したら、上部にある保存ボタンをクリックします。
残りのオプションを使って、ヘッダーデザイン、ロードモアボタン、購読ボタン、ビデオの数などを設定することができます。
最後に、YouTubeフィードのデザインに満足したら、「保存」をクリックします。
さて、最後のステップに進み、YouTubeの動画をサイトに表示することができる。
ステップ 5: ElementorにYouTubeフィードを埋め込む
このステップでは、ライブフィードエディタから直接YouTubeフィードを埋め込むことができます。
まず、埋め込み ボタンをクリックして、フィードの埋め込みオプションを開きます。
YouTubeの動画フィードを埋め込むには、さまざまな方法があります。
続けるには、ここでコピーボタンをクリックしてください。
YouTubeフィードの埋め込みコードを埋め込む場所を選択できます。WordPressのページ、投稿、サイドバー、フッターに埋め込むことができます。
ここではWordPressのページを使ってチュートリアルを行う。
そのためには、ダッシュボードからページ " 新規追加 メニューに移動します。
その後、上部にある「Elementorで編集 」ボタンをクリックします。
そうすると、Elementorページビルダーでページが開きます。ここから、Elementorウィジェットを使ってYouTubeフィードを埋め込むことができます。
左側の検索バーを使って、「ショートコード」 ウィジェットを探してください。
下の検索結果からショートコードウィジェットを見つけることができます。
ウィジェットをドラッグして 、右側のページにドロップ します。
そうしたら、左側のショートコードを入力するフィールドにショートコードを 貼り付けるだけです。
そうすることで、このElementorページにYouTubeフィードが埋め込まれます。
その後、Publish ボタンをクリックすると、YouTubeビデオフィードがオンラインになります。
あなたのウェブサイトを開いて、YouTubeの動画がどのように見えるかを見ることができます。
これで完成だ！
Elementorで再生できないYouTube動画を修正する方法がわかりました。これで、関連性の高い動画コンテンツで訪問者を惹きつけておくことができます。
あなたのサイトに動画を追加したいなら、市場で最高の選択肢はYouTube Feed Proです。数回クリックするだけで、美しいYouTubeフィードを作成、カスタマイズ、埋め込むことができます。
YouTubeフィードをサイトに追加する準備はできましたか？今すぐYouTube Feed Proを入手しましょう！
パワフルなウェブサイトを構築する方法をもっとお探しですか？最高のWordPressウェブサイトビルダーのリストをご覧ください。
この記事が役に立ったと思われた方は、フェイスブックや ツイッターでソーシャルメディアのヒントを探してみてはいかがだろうか。
