ElementorでYouTube動画が動かないのを直す方法(ステップバイステップ)
ホーム ブログ ElementorでYouTube動画が動かないのを直す方法(ステップバイステップ)

ElementorでYouTube動画が動かないのを直す方法(ステップバイステップ)

ElementorでYouTubeの動画が動かないのを直す方法

ElementorのYouTube動画があなたのサイトで動作していませんか?

YouTube動画は、訪問者を惹きつけ、購読者や顧客に変える素晴らしい方法です。 

しかし、YouTubeの動画が適切に機能していないと、ブランドの印象が悪くなる可能性がある。

朗報です。このチュートリアルでは、ElementorのYouTube動画を簡単に修正する方法をご紹介します。

この目次を使って、ここからセクションに飛ぶことができる:

始めよう!

ElementorでYouTube動画が動かないのを直す方法

Elementorのウェブサイト上でYouTube動画を修正するためのさまざまな手順を説明します。

ステップ1: Elementorのバージョンを更新する

Elementorの最新バージョンを使用していない場合、ビデオウィジェットのような一部の機能がウェブサイト上で正しく動作しない可能性があります。

これを解決するには、Elementorのバージョンを更新すればよい。

まず、WordPressのダッシュボードからプラグイン " インストール済みプラグインメニューに移動し、リストにあるElementorプラグインを探します。

プラグインのアップデートを促すメッセージが表示されたら、「今すぐアップデート」 ボタンをクリックします。

elementorのバージョンを更新する

プラグインが更新されるまで数秒待つと、Elementor上で動画が再生されているかどうかを確認できます。

おまけとして、自動更新を有効にするボタンをクリックすると、このプラグインを常に最新バージョンにすることができます。

elementorの自動アップデートを有効にする

それでも問題が解決しない場合は、ステップ2に進み、ウェブサイトのテーマを変更してみてください。

詳しくは、WordPressプラグインの更新方法をご覧ください。

ステップ2:WordPressのテーマを変更する

テーマによっては Elementor ページビルダーと互換性がないため、サイト上で動画エラーが発生する可能性があります。

解決策は?デフォルトのWordPressテーマの1つに切り替えて、動画をテストするだけです。

まず、WordPressのダッシュボードを開き、 外観 " テーマメニューに移動します。

ワードプレスのテーマページを開く

ここで、Twenty Twenty-TwoのようなデフォルトのWordPressテーマを探し、その上にマウスを置く

ここで「Activate」 ボタンをクリックし、テーマを切り替える。

これで、WordPressのelementor動画が正しく動作しているかどうかを確認することができます。

それでも動画が読み込まれない場合は、ステップ3へ進み、他のプラグインが問題を引き起こしていないか確認してください。

ステップ3:Elementorとのプラグインの競合を解決する

ElementorでYouTube動画が再生できない一般的な理由は、他のプラグインとの競合が原因かもしれません。

これに対処するには、WordPressのダッシュボードからプラグイン " インストール済みプラグインメニューを開きます。

ワードプレスのプラグインページを開く

ここで、左上のチェックボックスを クリックして、サイト上のすべてのプラグインを一度に選択する。

そうしたら、チェックボックスの上にあるドロップダウンメニューを使ってDeactivateオプションを選択します。

その後、右側の適用 ボタンをクリックして、ウェブサイトのすべてのプラグインを無効にすることができます。

これですべてのプラグインが非アクティブになったので、リストからElementorを探し、有効化ボタンをクリックする。

ウェブサイト上でelementorを有効にする

その後、YouTubeの動画が正常に動作するかどうかを確認してください。それでも同じエラーに直面する場合は、最後のセクションにスキップすることができます

これで問題が解決したら、残りのプラグインを1つずつ有効にして、どのプラグインが問題を引き起こしているかを調べてください。

競合するプラグインを見つけたら、3つの選択肢から選ぶことができる:

ステップ4に進んで、WordPressプラグインをすべて維持したままYouTube動画をサイトに埋め込む方法を学んでください。

ステップ4:YouTube動画フィードを作成する

上記のステップで問題が解決しない場合、簡単にできる解決策があります。

YouTube Feed Proを使えば、わずか数クリックでYouTube動画のフィードをサイトに表示することができます。

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プレイリストを埋め込む

次に、埋め込むYouTubeフィードの種類を選択します。ここでは6つの選択肢から選ぶことができます:

  • チャンネル YouTubeチャンネルを選択し、その動画を表示する
  • プレイリスト YouTubeのプレイリストから動画を埋め込む
  • お気に入り お気に入りとしてマークしたビデオを表示する。
  • 検索するYouTubeの検索結果をウェブサイトに表示する
  • ライブストリーム:新しいフィードを使用してYouTubeライブストリーミングビデオを埋め込む
  • 単一のビデオ:特定の動画を選択し、サイトに表示する。

YouTubeフィードの種類を選択し、「次へ」をクリックします。

youtubeフィードの種類

この例では、YouTubeのプレイリストフィードを使います。

YouTubeフィードの作成が完了したら、次のステップに進み、自分のアカウントも接続する。

ステップ3:YouTubeアカウントに接続する

YouTubeアカウントと接続することで、新しいフィードはあなたのウェブサイトにYouTubeのビデオを表示することができます。

そのための最良の方法は、YouTubeのAPIキーを接続することだ。

APIキーをまだお持ちではないですか?この初心者向けガイドに従ってYouTube APIキーを作成してください。

キーが手に入ったら、それをコピー し、ポップアップに貼り付けます

最後に、AddをクリックしてYouTubeアカウントに接続します。

youtubeにapiキーを追加

次に、YouTubeフィードのソースを選択します。選んだフィードの種類によって、YouTubeチャンネル、プレイリスト、お気に入りリスト、検索ワードなどがあります。

ここではYouTubeのプレイリストを例に説明する。

まず、ブラウザでプレイリストを開き、URLの最後にあるコードをコピーして ください。

youtubeのプレイリストIDをコピーする

そうしたら、WordPressサイトをもう一度開き、コードをプレイリストID フィールドに貼り付けます

次に、[Next]ボタンをクリックして、ソースの追加を完了します。

プレイリストIDを挿入する

このように、YouTube Feed Proを使えば、新しい動画フィードを簡単に作成し、YouTubeアカウントに接続することができます。

ステップ4では、このYouTubeフィードがElementorウェブサイト上でどのように見えるかをカスタマイズできます。

ステップ4:YouTubeフィードをカスタマイズする

YouTube Feed Proには、フィードの美しいデザインをインポートするために使用できるフィードテンプレートのコレクションが付属しています。

フィードのテンプレートは、以下の8つのオプションから選択できます:

  • デフォルト
  • カルーセル
  • カード
  • リスト
  • ギャラリー
  • 最新ビデオ
  • ショーケース・カルーセル
  • ウィジェット

テンプレートを選択したら、Nextをクリックして次に進みます。

フィードテンプレートを選ぶ youtubeフィードプロ

そうしたら、ライブフィードエディターを使って、フィードを詳細にカスタマイズすることができる。

左側には、フィードのレイアウト、色、ヘッダーのスタイル、動画の数、購読ボタンなどを設定するオプションが表示されます。

Youtubeフィードプロプラグイン用ライブフィードエディタ

右側には、YouTube Elementorフィードのリアルタイムプレビューが表示されます。

カスタマイズを開始したい場合は、左側の フィードレイアウトオプションを クリックします。

フィードレイアウトオプションを選択 youtubeフィードプロ

YouTubeフィードのレイアウトを4種類から選べます:グリッド、ギャラリー、リストカルーセルです。

以下、それぞれのレイアウトを見てみよう。

フィードレイアウト

ElementorサイトにYouTube動画をたくさん表示したい場合は、グリッド オプションを選択できます。

このようにYouTubeの動画が行と列で表示される:

Youtube動画のグリッドレイアウト

ギャラリーレイアウトは、YouTubeの1つの動画にフォーカスを当て、他の動画のサムネイルを小さく表示します。

あなたのサイトで特定のビデオを強調するのに最適な方法です。

YouTubeの大きな動画を1列に表示したいですか?

その場合はリストレイアウトを 使えばいい。

また、カルーセルレイアウトで YouTube動画をYouTubeスライドショーにすることもできます。

これは、訪問者があなたのウェブサイトと対話する別の方法を与えることができます。

フィードのレイアウトを選択したら、「保存」をクリックして変更を確定します。

その後、カスタマイズボタンをクリックしてカスタマイズを続けることができます。

Youtubeフィードをカスタマイズする

YouTube Feed Proを使えば、YouTubeフィードの色を設定することもできます。

そのためには、左の配色 オプションをクリックします。

配色オプションを選択 youtubeフィードプロ

YouTubeフィードの配色を4種類から選べるようになりました:

  • テーマから継承します: Elementorウェブサイトの色をコピーする
  • 明るい:明るい背景と暗いフォントのフィードを選ぶ。
  • Dark:明るい色のフォントの代わりに暗い色の背景を表示します。
  • カスタム:手動ですべての色を選ぶ
youtubeフィードプロの配色オプション

カラースキームを選択したら、上部にある保存ボタンをクリックします。

残りのオプションを使って、ヘッダーデザイン、ロードモアボタン、購読ボタン、ビデオの数などを設定することができます。

最後に、YouTubeフィードのデザインに満足したら、「保存」をクリックします。

さて、最後のステップに進み、YouTubeの動画をサイトに表示することができる。

ステップ 5: ElementorにYouTubeフィードを埋め込む

このステップでは、ライブフィードエディタから直接YouTubeフィードを埋め込むことができます。

まず、埋め込み ボタンをクリックして、フィードの埋め込みオプションを開きます。

Youtubeフィードを埋め込む

YouTubeの動画フィードを埋め込むには、さまざまな方法があります。

続けるには、ここでコピーボタンをクリックしてください。

ショートコードをYoutubeに埋め込む

YouTubeフィードの埋め込みコードを埋め込む場所を選択できます。WordPressのページ、投稿、サイドバー、フッターに埋め込むことができます。

ここではWordPressのページを使ってチュートリアルを行う。

そのためには、ダッシュボードからページ " 新規追加 メニューに移動します。

その後、上部にある「Elementorで編集 」ボタンをクリックします。

新しいワードプレスページを作成する

そうすると、Elementorページビルダーでページが開きます。ここから、Elementorウィジェットを使ってYouTubeフィードを埋め込むことができます。

左側の検索バーを使って、「ショートコード」 ウィジェットを探してください。

elementor 用ショートコードウィジェット

下の検索結果からショートコードウィジェットを見つけることができます。

ウィジェットをドラッグして 、右側のページにドロップ します。

elementor 用ショートコード・ブロック

そうしたら、左側のショートコードを入力するフィールドにショートコードを 貼り付けるだけです。

そうすることで、このElementorページにYouTubeフィードが埋め込まれます。

その後、Publish ボタンをクリックすると、YouTubeビデオフィードがオンラインになります。

あなたのウェブサイトを開いて、YouTubeの動画がどのように見えるかを見ることができます。

wordpressでのelementorプレイリストの例

これで完成だ!

Elementorで再生できないYouTube動画を修正する方法がわかりました。これで、関連性の高い動画コンテンツで訪問者を惹きつけておくことができます。

あなたのサイトに動画を追加したいなら、市場で最高の選択肢はYouTube Feed Proです。数回クリックするだけで、美しいYouTubeフィードを作成、カスタマイズ、埋め込むことができます。

YouTubeフィードをサイトに追加する準備はできましたか?今すぐYouTube Feed Proを入手しましょう!

パワフルなウェブサイトを構築する方法をもっとお探しですか?最高のWordPressウェブサイトビルダーのリストをご覧ください。

この記事が役に立ったと思われた方は、フェイスブックや ツイッターでソーシャルメディアのヒントを探してみてはいかがだろうか。

著者アバター
サジャン・シャルマ シニアライター
WordPress、ソーシャルメディアマーケティング、オンラインビジネスについて10年以上執筆。専門分野はインフルエンサーマーケティング、コンテンツキュレーション、デジタルマーケティング戦略など多岐にわたる。

コメントを追加する

コメントをお寄せいただきありがとうございます。すべてのコメントはプライバシーポリシーに従って管理され、すべてのリンクはnofollowであることにご留意ください。名前欄にはキーワードを使用しないでください。個人的で有意義な会話をしましょう。