フルスクリーンの動画背景は、瞬時に注目を集めます。これにより、シンプルなWordPressサイトが、洗練され、モダンで、プロフェッショナルにデザインされたもののように感じられます。
全体として、適切に配置された動画背景が第一印象をどれだけ向上させ、訪問者のエンゲージメントを維持できるかを見てきました。
良いニュースは、特別なソフトウェアやカスタム開発を必要としないことです。すでに持っているYouTube動画を使用することもできるため、ページに動きと個性を追加する手頃な方法となります。
このガイドでは、初心者向けのツールを使用してWordPressの背景としてYouTube動画を追加する最も簡単な方法を説明します。
💡クイックアンサー：WordPressでフルスクリーンの動画背景を追加する方法
WordPressサイトでフルスクリーンの動画背景が必要な場合、セットアップや好みに応じて、いくつかの簡単なオプションがあります。
- 方法1：Advanced WordPress Backgrounds（無料） – フルスクリーンのYouTube動画背景を追加するためのシンプルで無料のソリューションが必要な場合は、このプラグインを使用してください。
- 方法2：Thrive Architect（推奨） – ページビルダーで完全な制御と簡単なカスタマイズをしたいユーザーに最適です。視覚的に魅力的な動画ヘッダーをすばやく作成するのに理想的です。
- 代替：SeedProdアニメーション背景 – 動画の代わりに軽量なアニメーション背景を好む場合は、これを使用してください。これにより、帯域幅を節約し、ページ速度を向上させることができます。
YouTube動画をフルスクリーン背景として使用する理由
YouTube動画をフルスクリーン背景として使用することは、訪問者の注意をすぐに引きつけ、サイトに滞在してもらうための強力な方法です。
メリットは以下の通りです。
- ページの読み込み速度を維持する: 独自の動画をアップロードする代わりにYouTube動画を埋め込むことで、サイトを軽量に保つことができます。これはユーザーエクスペリエンスとSEOにとって重要です。
- 訪問者を即座に惹きつける: 動く動画の背景は、訪問直後の数秒間で注意を捉えることができます。
- 競合他社との差別化: 視覚的に魅力的でモダンな外観を作成し、サイトを際立たせます。
- 帯域幅とストレージを節約する: WordPressに動画をホストすると、多くのサーバーリソースを消費し、追加のストレージが必要になる場合があります。
WPBeginnerでは、動画をWordPressに直接アップロードするのではなく、YouTubeから動画を埋め込むことを強くお勧めします。このアプローチにより、サイトを遅くしたり、ホスティングプランに不必要な負担をかけたりすることなく、魅力的なコンテンツを表示できます。
それでは、WordPressウェブサイトにYouTube動画をフルスクリーン背景として追加する方法を見ていきましょう。2つの方法を紹介します。これらのクイックリンクを使用して、両者を切り替えることができます。
- 方法1：Advanced WordPress Backgroundsを使用してフルスクリーン動画の背景（無料）を作成する
- 方法2：Thrive Architectを使用してフルスクリーンビデオ背景を追加する（推奨）
- 代替案: SeedProdでWordPressにアニメーション背景を追加する
- 動画背景に関するよくある質問
方法1： Advanced WordPress Backgroundsを使用してフルスクリーン動画の背景（無料）を作成する
無料で簡単な方法で動画の背景を追加したい場合は、Advanced WordPress Backgrounds を使用できます。
この無料プラグインは、背景ブロックを追加し、YouTube動画を含む任意のカラー、画像、または動画を使用してフルスクリーン背景を作成できます。
まず、WordPressダッシュボードにプラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドを参照してください。
有効化したら、YouTube動画をフルスクリーン背景として追加したいページまたは投稿に移動します。Gutenbergブロックエディターで、「+」ブロック追加ボタンをクリックします。
表示されるポップアップで、「Background AWB」と入力し始めます。正しいブロックが表示されたら、クリックしてページに追加します。
左側のメニューには、作成できるさまざまな種類の全幅背景用の3つのタブ（Color、Image、Video）が表示されます。
YouTube動画を追加したい場合は、「Video」タブをクリックします。その後、「YouTube / Vimeo」タブを選択してください。
これで、WordPressブログで使用したいYouTube動画ファイルのURLをコピーして貼り付けることができます。
これで、WordPressブロックエディターにこの背景の外観プレビューが表示されます。
Advanced WordPress Backgroundsは、その上に配置するコンテンツに基づいて動画のサイズを変更するため、動画が現在少し小さく見えても心配しないでください。
デフォルトでは、モバイルデバイスでは動画の背景は無効になっています。
ただし、モバイルデバイスで動画の背景を表示したい場合は、「モバイルデバイスで有効にする」トグルをクリックして有効にします。
ただし、動画の背景はモバイルユーザーのバッテリーを消耗し、データを消費する可能性があることに注意してください。
標準では、ブロックはYouTubeビデオ全体を自動再生およびループ再生します。
もう1つのオプションは、動画の正確な開始時間と終了時間（秒単位）を「開始時間」と「終了時間」のボックスに入力して、動画の特定の部分を再生することです。
「ループ」トグルを無効にすることで、動画のループ再生を停止することもできます。
💡重要: 多くのブラウザでは音声付きの自動再生動画をブロックするため、動画はミュートにするか、音声がないことを確認してください。
デフォルトでは、訪問者がブラウザで表示できる場合にのみビデオが再生されます。これにより、ウェブサイトのパフォーマンスを維持できますので、通常は「常に再生」トグルを無効にしておくことをお勧めします。
動画を追加した当初は、不透明度が100%で表示されるため、完全に表示されます。「画像の不透明度」スライダーをドラッグして、YouTube動画の背景をより控えめにすることができます。
透明度を試す場合は、カラーオーバーレイを追加することも検討してください。
単にクリックして「Overlay Color」セクションを展開し、設定を使用してさまざまな色のオーバーレイを作成します。
その他の設定も自由に試して、パララックス効果や間隔などを調整して、背景を思い通りにカスタマイズしてください。
YouTube 動画の背景の設定が完了したら、リンク、テキスト、画像などのコンテンツの追加を開始します。
開始するには、背景 (AWB) ブロックの中央にある「+」アイコンをクリックします。
ここで追加したいブロックを選択するポップアップが表示されます。 Advanced WordPress Backgroundsプラグインはすべての標準WordPressブロックと連携するため、好きなコンテンツを追加できます。
ブロックの上にテキストを追加する場合は、テキストの色を変更して、動画の背景とよく合うようにしてください。
見栄えに満足したら、「Update」または「Publish」ボタンをクリックしてページを公開します。これで、WordPressウェブサイトにアクセスすると、動画の背景が機能しているのがわかります。
方法2：Thrive Architectを使用してフルスクリーンビデオ背景を追加する（推奨）
動画の背景を完全にカスタマイズしたい場合や、ページ全体を簡単にデザインしたい場合は、この方法が最適です。
これには、Thrive Architectが必要です。
徹底的なテストの結果、非常にユーザーフレンドリーなページビルダープラグインであることがわかりました。ビデオ背景機能に加えて、ドラッグ＆ドロップ機能も備わっており、柔軟に使用できるため、手間なく希望のウェブサイトを作成できます。
さらに、コンバージョンに最適化されたスマートなランディングページテンプレートが付属しているため、ランディングページは最初から成功するように設定されています。
Thrive Architectの詳細については、Thrive Architectのレビューをご覧ください。
注意: Thrive Architectがお好みでないですか？SeedProdページビルダーを使用して、YouTubeからフルスクリーン動画の背景を追加することもできます。ツールの詳細については、SeedProdレビューをご覧ください。
この方法を使用したい場合は、まずThrive Architectプランを購入してください。スタンドアロン製品として、またはThrive Themesバンドルの一部として購入できます。
次に、プラグインをインストールします。詳細については、WordPressプラグインのインストール方法のガイドをご覧ください。
その後、WordPress管理エリアから「固定ページ」に移動し、編集するページを選択します。ページにカーソルを合わせ、「Thrive Architectで編集」を選択します。
次に、ページ右側の「+」ボタンをクリックし、「Background Section」要素を見つけます。
クリックするだけでページに追加できます。
この時点で、ページの左側へ移動し、「Background Style」セクションまでスクロールダウンできます。
ここで、「動画の背景」トグルを有効にし、ソースとして「YouTube」を選択するだけです。
次に、フルスクリーン背景として使用したいYouTube動画に移動します。
YouTube 動画の URL をこのようにコピーします。
💡プロのヒント: 選択した動画に広告が有効になっていないことを確認してください。そうしないと、広告が表示されて背景コンテンツが隠れる可能性があります。
次に、適切なセクションにURLを貼り付けます。
これで、画面に背景が表示されるはずです。
背景は追加されましたが、まだフルスクリーンではありません。
全画面表示にするには、「Main Options」セクションまでスクロールアップする必要があります。次に、「Content covers entire screen width」、「Match height to screen」、「Stretch to fit screen width」オプションを有効にします。
他のオプションも見てみましょう。背景にコンテンツを追加するには、右側にある「+」ボタンをもう一度クリックし、要素をドラッグアンドドロップするだけです。
テキスト、画像、フォーム、ボタン、お客様の声などを追加できます。Thrive Architectには、ウェブサイトで活用できるコンバージョン重視の要素が多数用意されています。
背景色がテキストとのコントラストが十分でないと思われる場合は、背景セクションの設定に戻ってください。
次に、[Background Style]までスクロールダウンし、[Add Layer]オプションで単色を選択します。その後、背景フィルターとして使用する色を選択し、好みに合わせて不透明度を調整できます。
完了したら、「適用」をクリックするだけです。
背景セクションの設定で調整できるもう1つの項目は、スクロール動作です。静的、固定、またはパララックスのいずれかに設定できます。
背景がユーザーのスクロールに合わせて動かないように、静止状態にしておくことをお勧めします。そうしないと、動画が再生され続け、ウェブサイトの速度が低下する可能性があります。
次にできることは、レスポンシブセクションに移動することです。ここで、ビデオ背景をウェブサイトのモバイル版およびタブレット版に表示するかどうかを選択できます。
これはあなた次第ですが、動画の読み込みには時間がかかることを念頭に置いてください。小さな画面のデバイスで動画を実行するのを訪問者が待つのは、迷惑になる可能性があります。
フルスクリーンYouTube動画の背景に満足したら、「作業を保存」ボタンをクリックして変更を保存します。
これで完了です！
次に、WordPressウェブサイトにアクセスして、ライブでの表示を確認してください。
こちらがテストウェブページの外観です。
代替案: SeedProdでWordPressにアニメーション背景を追加する
動画の背景は視覚的に魅力的ですが、ウェブサイトの読み込み速度を低下させる可能性もあります。代替手段が必要な場合は、代わりにアニメーション背景を追加できます。
これを行う最良の方法は、WordPress用の強力なドラッグ＆ドロップページビルダープラグインであるSeedProdを使用することです。
particle.jsを使用して、ウェブサイトに魅力的なアニメーション背景を簡単に追加できます。Particle.jsは、インタラクティブなパーティクルアニメーションを作成する軽量JavaScriptライブラリです。
詳細については、WordPressでアニメーション背景を追加する方法に関するガイドをご覧ください。
ボーナスのヒント: WordPress に YouTube 動画フィードを追加する
ウェブサイトに動画を追加したいですか？WordPressには組み込みの動画埋め込みブロックがありますが、特に複数の動画がある場合、動画を表示するのに最も視覚的に魅力的な方法ではありません。
そこでおすすめなのが、Smash Balloon YouTube Feed Pro です。
私たちの意見では、これは市場で最高のYouTubeギャラリープラグインであり、YouTubeチャンネルの最新の動画をすべて自動的に表示するため、訪問者は常に最新のコンテンツを見ることができます。
Smash Balloonの簡単なエディターでYouTubeフィードを作成し、ショートコードまたはプラグインの既製のブロックを使用して、任意のページまたは投稿に追加するだけです。
Smash Balloon を使用すると、WordPress ウェブサイトに YouTube のプレイリスト、お気に入り、ライブ ストリームを埋め込むこともできます。
Smash Balloonの最も良い点は、サイトの速度を低下させないことです。このプラグインに組み込まれたYouTubeキャッシュ機能により、サイトは常に高速で読み込まれ、SEOにも最適です。
詳細については、WordPressでYouTubeチャンネルの最新動画を表示する方法に関するステップバイステップガイドをご覧ください。
動画背景に関するよくある質問
WordPressで動画背景を追加することに関して、読者からよく寄せられる質問を以下に示します。
YouTube動画をフルスクリーンにするにはどうすればよいですか？
YouTube動画をフルスクリーンにするには、YouTubeプレーヤーの右下にあるフルスクリーンアイコンをクリックするか、動画がアクティブなときにキーボードショートカットのfを使用してください。
WordPressに動画背景を追加するにはどうすればよいですか？
プラグインまたはThrive Architectのようなページビルダーを介して動画背景を追加できます。YouTube動画の場合は、サイトの速度低下を避けるために埋め込みが推奨されます。
背景としてどのような種類のYouTube動画を選ぶべきですか？
メインコンテンツの邪魔にならない程度に控えめで、視覚的に魅力的な動画を選ぶことをお勧めします。ループ再生される短いクリップで、動きが穏やかなものが最も効果的です。
このチュートリアルで、WordPressにYouTube動画を背景として追加する方法を学べたことを願っています。また、WordPressでバイラル待機リストランディングページを作成する方法や、おすすめのWordPressテーマビルダーに関するガイドもぜひご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
Mrteesurez
これはエキサイティングな機能です。ユーザーがサイトに長く滞在し、背景で再生されるシーンを視聴する際に、より魅力的な外観を提供できます。
これがユーザーの注意をそらしたり、ウェブサイトを遅くしたりしない限り、ユーザーはより長く滞在する傾向があるため、ウェブサイトの直帰率を低下させます。
Createandgoのようなブログや、その他同様のブログでこれに気づきました。この記事を共有していただきありがとうございます。
モイヌディン・ワヒード
これは、バックグラウンドで何かを再生することで、訪問者の注意を引くための非常にシンプルでありながら強力なアイデアです。
私はそれをページビルダーで使用していましたが、Gutenbergから直接利用できる簡単な方法があるとは知りませんでした。
特にランディングページやセールスページに役立ち、訪問者がコールトゥアクションボタンに直感的にエンゲージできるようになります。
簡単な手順を説明していただきありがとうございます。
Mrteesurez
個人的には、このテクニックは特にランディングページやセールスページで非常に効果的だと感じています。私は以前これにElementorを使用していましたが、Gutenbergで直接実行できることを知ったのは、私にとって追加の知識です。
THANKGOD JONATHAN
WordPressライブラリにアップロードした動画があり、それをブログの背景動画にしたいと考えています。
ウェブサイトの速度に影響を与えないように、適切に行うにはどうすればよいですか？それとも、YouTubeにアップロードしてからサイトに埋め込む必要がありますか？
WPBeginnerサポート
動画をWordPressサイトに直接アップロードすることは推奨しません。その理由は以下のガイドをご覧ください！
https://www.wpbeginner.com/beginners-guide/why-you-should-never-upload-a-video-to-wordpress/
管理者
ラルフ
ポートフォリオ/ビジネス連絡先ページの背景として使用したいのですが、ウェブサイト自体が遅くなるのでしょうか、それともYouTubeから直接読み込まれ、ウェブサイト自体が遅くならないのでしょうか？
前のコメントは古いですが、依然として懸念事項です。
WPBeginnerサポート
動画はYouTubeから埋め込みで読み込まれるため、サイトの動作が遅くなることはありません。
管理者
イジー・ヴァネック
ウェブサイト自体の遅延については心配する必要はありません。ここでの問題は、主に接続性とこれらのデバイスのデータ速度の遅さにあります。最初の問題は、接続が強くないモバイルで発生します。遅延し、プロフェッショナルに見えず、ユーザーが離れる可能性があります。2番目の問題は、データプランが限られている人が、そのページがどれだけ多くのデータを消費するかについて不平を言うことです。個人的には、これは避けるでしょう。
イジー・ヴァネック
Gutenbergでまた新しいことを学べました。Elementorではこの方法しか知らなかったのですが、Elementorで動画の背景を追加するのは本当に簡単です。これでElementor以外でもやり方がわかりました。
WPBeginnerサポート
Glad we could share the process
管理者
T_Lind
素晴らしい記事です！
しかし、説明されているように、単一のページにビデオ背景を追加できません。YouTube動画はホームページにしか追加できず、アプリの使用範囲が限定されます。
アイデアは？
Tobi
こんにちは、このプラグインは私のウェブサイトにとって大惨事でした。
すべてのリソースを消費し、数時間にわたり、ホスティング会社に電話して、以下のスクリーンショットのエラーが発生した理由を解決しようとしていました。
何時間もかけて、最近インストールしたプラグインに原因を突き止めました。
ファイルマネージャーから削除する必要があり、すべて元に戻りました。
スーパーホスティングアカウントを持っていない限り、多くのリソースを消費します。お勧めしません。
WPBeginnerサポート
Tobi様
プラグインはYouTubeから動画を読み込むため、ウェブサイトからではなく、多くのリソースを消費するべきではありません。最初に共有されたスクリーンショットは、データベース接続エラーを示しています。すべてが正常に機能することを願っていますが、ウェブサイトで問題が引き続き発生する場合は、ホスティングの問題である可能性が非常に高いです。
管理者
マイク
Avadaに対応していますか？
カルロス・レオン
モバイルで再生されますか？