WordPressサイトにビデオの背景を追加する方法

WordPressビデオの背景を追加する最も簡単な方法をお探しですか？

よくできたビデオの背景は注目を集め、ブランドを最初からクールに見せます。 しかし、うまく行かないと、ビデオの背景がサイトの速度を低下させ、スペースを占有し、新しい訪問者を混乱させます。 そのため、このガイドを作成したのは、すべての落とし穴を回避し、代わりに、WordPressビデオの背景を正しい方法で追加する方法を学ぶためです。

特別な技術的知識がなくても、WordPressWebサイトにビデオの背景を追加するためのベストプラクティスと手順について学ぶために読み続けてください。

WordPressビデオの背景を追加するためのベストプラクティス

• ファイルサイズを低く保ち、解像度を高くします。大きなビデオや画像ほどサイトのパフォーマンスを低下させるものはありません。 それでも、圧縮中に解像度を維持することが望ましいです。
• やりすぎないでください。ビデオが多すぎると、インターフェイスが乱雑になります。 それらを使用して、要点を述べたり、関連性のあるものを紹介したりするだけです。
• 追加情報を含む召喚状を含める：視聴者がもっと欲しがるままにしないでください。その後、詳細につながるリンクを忘れてください。
• どんな犠牲を払ってもオーディオを避けてください：すべての人々があなたのウェブサイトを見たいだけであるとき、それは耳障りです。
• オーディオが必要な場合は、自動再生に含めないでください。ユーザーがオーディオを再生するためのオプションを提供します。
• 音声付きの動画のクローズドキャプションを検討してください。場所や聴覚障害のせいで、誰もがあなたの音声を聞くことができるわけではありません。
• 外部でホストする：サイトホストはおそらくビデオを提供するように設計されていないため、パフォーマンスを維持するためにVimeoやYouTubeなどのサイトを選択するか、特殊なビデオホスティングサイトを検討してください。
• 最高のフォーマット/解像度に固執する：私たちはMP4のみを話している。 最低720p; h264コーデック。

また、すべてのWebサイトにビデオが必要なわけではないことを忘れないでください。 場合によっては、インターフェイスが乱雑になり、速度が遅くなり、焦点が合わなくなることがあります。 たとえば、弁護士は、ウェブサイトの速度を低下させるような手振りのビデオではなく、プロの写真に固執する必要があります。

WordPressのビデオ背景を追加する方法

WordPress内でビデオの背景機能をアクティブにするいくつかの方法があります。

4つの異なるコードフリーソリューションに焦点を当てます。

1. 内蔵カバーブロック
2. 背景/ヘッダープラグイン
3. お気に入りのページビルダープラグイン
4. ビデオの背景またはヘッダーをサポートするテーマを使用する

以下の各方法の手順に従ってください。

オプション1：内蔵カバーブロック

ネイティブのWordPressエディターは、テキストやボタンなどの他のコンテンツの背後に背景画像を挿入するためのカバーブロックと呼ばれるものを提供します。

多くのWordPressユーザーが気付いていないのは、 Coverブロックがビデオの背景もサポートしていることです。

ステップ1：カバーブロックを追加する

開始するには、背景を追加するページに移動し、 Coverブロックを追加します。

ステップ2：動画をアップロードする

表紙には、[アップロード]または[メディアライブラリ]ボタンのどちらかを選択して、ビデオの追加に使用します。

Coverブロックは、ビデオのサポートについては何も述べていないため、メディアライブラリからビデオ（MP4など）を選択する必要があります。 ビデオをオフにしたら、 [選択]ボタンをクリックします。

ステップ3：オーバーレイするフォアグラウンドコンテンツを挿入する

これで、背景ビデオのプレビューが表示されます。 テキストやボタンなどの前景ブロックをカバーに追加できます。

ステップ4：必要に応じてカバー設定を編集します

カバー設定は次のとおりです。

• カラーオーバーレイ：テキストを読みやすくするのに理想的
• 不透明度：フォアグラウンドコンテンツを明らかにするのにも役立ちます
• カバーの最小の高さ： WordPressビデオの背景カバーをより多くのスペースにするために必要な場合があります

ステップ5：WordPressビデオの背景を実際に表示する

完了したら、ページを保存し、フロントエンドに移動してWordPressビデオの背景を確認してください。

WordPressビデオの背景を追加するためのプラグインはかなり多くあり、その中には完全なサイトの背景を提供するものもあれば、ビデオヘッダーを提供するためのものもあります。

これらは最高のビデオバックグラウンドプラグインです：

️私たちのお気に入りは、AdvancedWordPressBackgroundsプラグインです。 ほんの数ステップで、そのプラグインを使用してWordPressビデオの背景を追加する方法を紹介します。

ステップ1：AWBをインストールし、そのコンテンツブロックを追加します

まず、Advanced WordPress Backgrounds（AWB）をインストールします。

背景ビデオを追加するページに移動します。

WordPressエディターを使用して、クリックしてコンテンツブロックを追加します。 背景（AWB）ブロックを検索して選択します。

ステップ2：ビデオを追加する

これにより、要素に色、画像、またはビデオの背景を追加するオプションが提供されます。

ビデオを選択し、YouTubeまたはVimeoからのビデオURLを貼り付けます。 別の方法として、プラグインにはローカルビデオをアップロードするための[セルフホスト]タブがあります。

ステップ3：ビデオの背景の高さと幅を拡大する

デフォルトでは、コンテンツブロックはページ領域の大部分をカバーするように拡張されません。 エディターの[フルハイト]ボタンをクリックする必要があります。 ビデオの背景を全幅に拡張するためのボタンもあります。

背景ビデオの上に、テキスト、ボタン、画像などのコンテンツをドラッグまたは挿入することもできます。

ステップ4：WordPressビデオの背景設定を変更する

[ブロック]タブで、開始時間、終了時間、ループ、常に再生、ビデオの不透明度など、必要な設定を調整します。

不透明度を下げた背景色オーバーレイを追加することをお勧めします。 これにより、オーバーレイテキストが読みやすくなります。

これを行うには、[ブロック]タブに移動し、[背景色]で色を白または黒に変更します。 不透明度スライダーを少し下に移動して、背景が引き続き表示されるようにします。

ステップ5：結果を表示する

その結果、他のコンテンツの前でビデオが再生されます。理想的には、ループし、サウンドがなく、フォアグラウンドコンテンツにほとんどの焦点を合わせたままのビデオです。

オプション3：お気に入りのページビルダープラグイン

Elementor、WPBakery、Diviなどのほとんどのページビルダーは、ほぼすべてのコンテンツモジュールに画像またはビデオの背景を追加するための背景機能を提供します。

️お好みのページビルダーを自由に選択できますが、使いやすさからElementorをお勧めします。

始める前に、必ずElementorまたは使用する予定のビルダーをインストールしてください。

ステップ1：Elementorエディターでページを開く

WordPressのページに移動し、ホームページとして指定されたページを選択します。 [ Elementorで編集]ボタンをクリックします。

ステップ2：セクションコンテンツブロックを追加する

Elementorのほとんどのコンテンツモジュールはバックグラウンド設定を提供しますが、セクションを挿入することをお勧めします。 そうすれば、テキスト、画像、ボタンなど、複数のアイテムをセクションに追加できます。 次に、セクションにビデオの背景を追加して、フォアグラウンドのすべての背後に配置します。

チュートリアルのセクションにテキストとボタンを追加しました。 先に進み、[セクションの編集]アイコンを選択してから、[スタイル]タブを選択します。

ステップ3：ビデオの背景を挿入する

ここに、 [背景]ドロップダウン領域が表示されます。 [背景タイプ]の横にある[ビデオ]オプションを選択します。 次に、YouTube、Vimeo、またはローカルファイルのURLを[ビデオリンク]フィールドに貼り付けます。

ステップ4：ビデオの背景設定を編集する

画面をより多く表示するには、ビデオの背景を拡大する必要がある場合があります。 これを行うには、[レイアウト]タブに切り替えて、[高さ]と[最小の高さ]を調整します。

[スタイル]タブに戻り、背景ビデオの設定を変更することを検討してください。

• 始まる時間
• 終了時間
• 一度プレイ
• モバイルで再生
• プライバシーモード

さらに、前景のテキスト、ボタン、および画像をより見やすくするために、背景オーバーレイ（通常は黒や白などの中間色、および不透明度の変更）を追加することを検討してください。

ステップ5：フロントエンドでWordPressビデオの背景を表示する

完了すると、セクションのすべてのコンテンツの背後でビデオが再生されます。

オプション4：ビデオの背景/ヘッダーをサポートするWordPressテーマを使用する

さまざまなWordPressテーマは、組み込みのヘッダー、スライダー、およびフルページのメディア設定を提供します。 これらを使用すると、画像、GIF、またはビデオをアップロードして画面全体を占めることができます。これは、ほとんどの場合、ホームページのヘッダーとして使用されます。

ビデオ背景機能を備えたテーマを見つけるには、人気のあるマーケットプレイスで「ビデオ背景」を検索してください。

️テーマにビデオの背景機能があることを確認するために、機能リストをスキャンするか、ダウンロード/購入する前に開発者に依頼してください。

例として、ColibriWPテーマはビデオの背景を提供します。

ステップ1：テーマをインストールしてアクティブ化する

ビデオの背景をアクティブにするには、Colibri WPテーマをインストールしてから、[外観]>[ Colibri設定] >[はじめに]に移動します。 ここで、ColibriPageBuilder機能をアクティブ化できます。

ステップ2：デモサイトを追加する

[デモサイト]タブをクリックして、選択したデモテンプレートをインポートします。

ステップ3：ヒーロー画像をカスタマイズする

[外観]>[カスタマイズ]に移動し、ヒーローモジュールの横にある[設定]歯車アイコンを選択します。

ステップ4：ビデオの背景を追加する

[スタイル]タブを選択し、[背景]を[ビデオ]に切り替えます。

最後に、 YouTubeを選択して外部ビデオURLを貼り付けるか、セルフホストを選択してローカルビデオをアップロードします。

その結果、カスタマイザープレビューで動画の背景が動いているのがわかります。

完璧なビデオの背景から始めましょう

この投稿では、4つの異なる方法を学びましたが、そのうちの少なくとも1つは状況に応じて機能するはずです。

️サイトを改善する他の方法については、成功したホームページデザインの10の要素を含む投稿を確認してください。

WordPressビデオの背景について質問がある場合は、以下のコメントであなたの考えを共有してください。