WordPressでYouTube動画をフルスクリーンの背景として追加する方法

私たちは時々、WordPressサイトをより魅力的で視覚的にアピールする新しい方法を追加しようとしますが、その1つがフルスクリーンの背景としてYouTube動画を追加することです。

背景動画を適切に使用すれば、訪問者のエンゲージメントとページ滞在時間を大幅に増やすことができます。 また、訪問者の注意を即座に引き、印象に残る第一印象を与える素晴らしい方法であることもわかります。

この記事では、YouTubeの動画をフルスクリーンの背景としてWordPressのウェブサイトに追加する方法を紹介します。

なぜYouTube動画をフルスクリーンの背景に使うのか？

ヘッダーに魅力的で目を引く動画の背景を表示することは、訪問者にサイトに滞在してもらうための素晴らしい方法です。訪問者があなたのWordPressサイトに最初にアクセスしたとき、彼らの注意を引くには数秒しかありません。

最近では、さまざまなWordPressテーマが動画背景をサポートしています。 しかし、WordPressで動画コンテンツをアップロードしてホスティングするには、多くの帯域幅が必要です。

WordPressのホスティングサービスプランによっては、追加のストレージを購入しなければならない場合もあります。

WPBeginnerでは、WordPressに動画をアップロードしないことを強くお勧めします。

その代わりに、YouTubeのようなサービスを利用し、WordPressサイトの背景として動画を埋め込むことができます。こうすることで、サイトを遅くしたりユーザーエクスペリエンスに影響を与えることなく、ライバルに差をつけることができます。

それでは、WordPressサイトのフルスクリーン背景としてYouTube動画を追加する方法を見てみましょう。ここでは2つの方法を紹介しますので、これらのクイックリンクを使ってナビゲートしてください：

方法1： フルスクリーン動画背景用の高度なWordPress背景を使用する（無料）

動画背景を無料で簡単に追加する方法をお探しなら、Advanced WordPress Backgroundsをご利用ください。

この無料プラグインは、YouTubeの動画を含む、任意の色、画像、または動画を使ってフルスクリーンの背景を作成できるBackgroundブロックを追加します。

まず、WordPressダッシュボードにプラグインをインストールして有効化する必要があります。WordPressプラグインのインストール方法については、こちらをご覧ください。

有効化したら、YouTube動画をフルスクリーン背景として追加したいページや投稿にアクセスするだけです。Gutenbergのブロックエディターで、「+」ブロック追加ボタンをクリックします。

表示されるポップアップで「Background AWB」と入力する。右のブロックが表示されたら、クリックしてページに追加する。

左側のメニューに、作成できる全幅背景の種類を示す3つのタブがあります：カラー、画像、動画です。

YouTubeの動画を追加したいので、「動画」タブをクリックします。その後、「YouTube / Vimeo」タブを選択します。

WordPressブログで使用したいYouTube動画ファイルのURLをコピー＆ペーストします。

WordPressのブロックエディターには、この背景がどのように表示されるかのプレビューが表示されます。

Advanced WordPress Backgroundsは、動画の上に追加するコンテンツに応じて動画のサイズを変更するので、現在の動画が少し小さく見えても心配はいりません。

初期設定では、モバイル端末での動画背景は無効化されています。

ただし、モバイル端末で動画の背景を表示したい場合は、「モバイル端末で有効化」をクリックして有効化してください。

このブロックは、YouTubeの動画全体を自動再生とループで再生します。

もう一つのオプションは、「開始時間」と「終了時間」のボックスに正確な時間を入力して、動画の特定の部分を再生することです。

ループ」トグルを無効化すれば、動画のループ再生を止めることもできる。

初期設定では、ブラウザーに動画が表示されているときのみ再生されます。これはサイトのパフォーマンスを維持するのに役立ちますので、通常は「常に再生」トグルを無効化したままにします。

最初に動画を追加したときは、不透明度100%で表示されるので、しっかりした動画に見えます。イメージの不透明度」スライダーを自由にドラッグして、YouTube動画の背景をより微妙にすることができます。

不透明度を試すなら、色のついたオーバーレイを追加してみるのもいいだろう。

オーバーレイ・カラー」セクションをクリックして展開し、設定を使用してさまざまな色のオーバーレイを作成します。

パララックス効果やスペーシングなど、他の設定も自由に試して、背景を思い通りに仕上げてください。

YouTube動画の背景の設定に満足したら、次はリンクやテキスト、画像などのコンテンツを追加しましょう。

まず、背景（AWB）ブロックの中央にある「＋」アイコンをクリックする。

これにより、追加したいブロックを選択するポップアップが開きます。 Advanced WordPress Backgroundsプラグインは、WordPressの標準ブロックすべてと連動しているので、好きなコンテンツを追加できます。

ブロックの上にテキストを追加する場合は、動画の背景とうまく調和するようにテキストの色を変更してください。

ページが完成したら、「更新」または「公開」ボタンをクリックしてください。これで、WordPressサイトにアクセスすると、動画の背景が表示されます。

方法2：Thrive Architectを使用してフルスクリーン動画の背景を追加する（推奨）

フルスクリーンの背景動画を完全にカスタマイズしたい、あるいはサイト上のすべてのページを簡単にデザインしたいとお考えなら、この方法がおすすめです。

YouTube動画をフルスクリーンの背景として追加する最良の方法は、Thrive Architectを使うことです。

Thrive Architectは初心者向けに作られた使いやすいページビルダープラグインです。動画背景機能のほか、ドラッグ＆ドロップで柔軟に使えるので、手間をかけずに思い通りのサイトを作ることができます。

さらに、コンバージョンに最適化されたスマートなランディングページテンプレートが付属しているので、ランディングページは最初から成功するように設定されています。

Thrive Architectの詳細については、Thrive Architectのレビューをご覧ください。

この方法を使いたい場合は、まずThrive Architectプランを購入してください。Thrive Architectは単体で購入することも、Thrive Themesバンドルの一部として購入することもできます。

その後、プラグインをインストールするだけです。詳しくはWordPressプラグインのインストール方法をご覧ください。

その後、WordPressの管理エリアから「ページ」に移動し、編集するページを選択します。ページにマウスオーバーし、’Thrive Architectで編集’を選択します。

次に、ページの右側にある「+」ボタンをクリックし、Background Section要素を見つけます。

クリックするだけでページに追加される。

この時点で、ページの左側に移動し、「背景スタイル」セクションまでスクロールダウンすることができます。

ここで、「動画の背景」トグルを有効化し、ソースに「YouTube」を選択する。

その後、フルスクリーンの背景として使いたいYouTube動画にアクセスする。

このようにYouTube動画のURLをコピーするだけです：

次に、該当するセクションにURLを貼り付ける。

これで画面に背景が表示されるはずだ。

背景は追加されているが、まだフルスクリーンではない。

フルスクリーンであることを確認するには、メインオプションセクションまでスクロールする必要があります。次に、「コンテンツは画面幅全体をカバーする」、「高さを画面に一致させる」、「画面の幅に合わせてストレッチする」のオプションを有効化します。

さらにオプションを探そう。背景にコンテンツを追加するには、右側の「+」ボタンをもう一度クリックして、要素をドラッグ＆ドロップするだけです。

テキスト、画像、フォーム、ボタン、テスティモニアルなどを追加できます。Thrive Architectには、サイトに活用できるコンバージョンに特化した要素が多数あります。

背景色とテキストのコントラストが十分でないと思ったら、背景セクションの設定に戻るだけです。

次に、もう一度「背景スタイル」までスクロールダウンし、「レイヤーを追加」オプションで無地を選択する。その後、背景フィルターとして使用する色を選択し、不透明度を好きなように調整することができます。

完了したら、「Apply」をクリックするだけです。

背景セクションの設定で調整できるもう一つのことは、スクロールの動作です。静止表示、先頭固定表示、視差表示のいずれかを選択できます。

ユーザーがスクロールダウンしても背景が動かないように、静止画にしておくことをお勧めします。そうしないと、動画が再生され続け、サイトの表示速度が遅くなる可能性があります。

次にできることは、レスポンシブのセクションに行くことです。ここでは、動画の背景をモバイル版とタブレット版のサイトに表示するかどうかを選択できます。

あなた次第ですが、動画の読み込みには時間がかかることを覚えておいてください。小さな画面の端末を使用している場合、動画が表示されるのを待つのは訪問者にとって煩わしいものです。

フルスクリーンのYouTube動画の背景に満足したら、「作業を保存」ボタンをクリックして変更を保存します。

それだけだ！

では、WordPressのサイトにアクセスして、実際にどのように見えるか見てみましょう。

テスト用のウェブページはこんな感じだ。

代替手段WordPressでアニメーションの背景を追加する

動画の背景は視覚的に魅力的ですが、サイトの読み込み速度を遅くする可能性もあります。別の設定をお望みなら、代わりにアニメーションの背景を追加することができます。

これを行う最良の方法は、WordPress用の強力なドラッグ＆ドロップページビルダープラグインであるSeedProdを使用することです。

particle.jsを使えば、サイトに魅力的なアニメーション背景を簡単に追加できます。Particle.jsは、インタラクティブなパーティクルアニメーションを作成する軽量のJavaScriptライブラリです。

詳しくは、WordPressでアニメーションの背景を追加する方法をご覧ください。

ボーナスのヒントWordPressでYouTube動画フィードを追加する

サイトにもっと動画を追加したいですか？WordPressにはビルトイン動画埋め込みブロックがありますが、動画を表示する方法としては、特に複数の動画を表示する場合、最も視覚的に魅力的な方法ではありません。

そこでSmash Balloon YouTube Feed Proの登場です。

Smash Balloon YouTube Feed Proは、市場で最高のYouTubeギャラリープラグインです。YouTubeチャンネルの最新動画をすべて自動的に表示するので、訪問者は常に最新のコンテンツを見ることができます。

Smash Balloonの簡単エディターでYouTubeフィードを作成し、ショートコードまたはプラグインの既製ブロックを使ってページや投稿に追加するだけです。

Smash Balloonを使って、YouTubeのプレイリスト、お気に入り、ライブストリームをWordPressサイトに埋め込むこともできます。

Smash Balloonの最大の特長は、サイトの表示速度を低下させないことです。プラグインにビルトインされたYouTubeキャッシュ機能により、サイトが常に高速に読み込まれるため、SEO対策にも最適です。

詳しくは、WordPressでYouTubeチャンネルの最新動画を表示する方法のステップバイステップガイドをご覧ください。

このチュートリアルで、WordPressでYouTube動画を背景として追加する方法を学んでいただけたでしょうか。WordPressでバイラルウェイトリストのランディングページを作成する方法と、WordPressテーマビルダーのエキスパートが選ぶベストテーマもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.