ビデオの背景を使用すると、Web サイトにプロ意識を加えることができます。ビデオの背景は、企業の Web サイト、ポートフォリオ、オンライン ギャラリーでよく使用されます。

ウェブサイトの新しいデザインを探しているなら、間違いなくビデオ背景が使用されているのを見たことがあるでしょう。 WordPress テーマの開発者は、自分のデザインをアピールする方法を常に検討しており、デザインで何ができるかを紹介するためにビデオ背景を頻繁に使用します。

ありがたいことに、Web サイトにビデオ背景を追加するために新しい WordPress テーマにお金をかける必要はありません。 Beaver Builder を有効にすると、数分で Web サイトのどのページにもプロ仕様のビデオ背景を表示できます。必要に応じて、ページの一部にのみビデオ背景を表示することもできます。

このチュートリアルでは、Beaver Builder ビジュアル ページ ビルダー WordPress プラグインを使用して、3 つの簡単な手順でビデオの背景を追加する方法を説明したいと思います。

ステップ 1: 適切な背景ビデオを見つける

Beaver Builder を使用して背景ビデオを追加するのは、非常に簡単です。

このチュートリアルで最も難しい部分は、Web サイトで使用するビデオを選択することです。選択できるビデオは数千あるためです。

伝えたいトーンを設定するのに役立つビデオを選択してください。たとえば、忙しく働く人々と離れて働く人々のビデオは企業 Web サイトに最適ですが、穏やかな自然のビデオは健康 Web サイトに適しています。

オンライン上には、背景用の無料ビデオやプレミアムビデオを見つけることができる場所がたくさんあります。

ビデオを見つけるのに私のお気に入りの場所は Coverr です。すべてのビデオはプロフェッショナルに見え、無料でダウンロードして使用できます。いくつかのカテゴリにわたって毎週 7 つの新しいビデオが追加されるため、お気に入りのビデオが必ず見つかります。 zip ファイルをダウンロードする前に、各ビデオをプレビューできます。

Coverr にはビデオ背景の豊富なセレクションがあり、それらはすべて無料でダウンロードできます。

無料のビデオ背景をチェックするのに適したその他の Web サイトは次のとおりです (順不同)。

• マズワイ
• ビデジー
• ヴィズプレイ
• クリップキャンバス
• XSストックビデオ
• Pexels ビデオ
• イグナイトモーション
• タヌリ実験
• ビーチフロント B ロール
• 無料のストック映像
• 無料の HD 映像
• 蒸留
• ファンシー フッテージ クラブ
• スプラッシュベース
• 無料のビデオ映像

動画サービスでも動画が見つかります。 YouTube では、ビデオの背景を提供する OrangeHD のようなチャンネルが見つかります。 Vimeo にも、FreeHD や Life of Vids などのリソースを介して素晴らしいビデオが見つかります。

一部のソーシャル サービスでも映像が見つかります。 Reddit の Footage や Stockfootage などのサブレディットをチェックアウトします。 Flickr も一見の価値がありますが、ライセンスとしてクリエイティブ コモンズを選択するようにしてください。

VideoHive では、何万ものビデオ背景を見つけることができます。

プレミアムビデオの背景は大金ではありません。 VideoHive の価格はビデオあたりわずか 8 ドルからです。 VideHive には 25 万を超えるストック フッテージ ファイルがあり、そのうち 36,000 を超えるファイルがビデオの背景に適しています。

Shutterstock や VideoBlocks などのストック画像やストック ビデオ サービスは、月額制で購読しない限り少し高価になる傾向がありますが、予算がもう少し許せば、素晴らしいビデオがたくさん見つかります。

ステップ 2: ビデオ ファイルを準備する

ビデオの背景を選択したら、ファイルを準備する必要があります。

メインのビデオ ファイルは MP4 形式で保存する必要があります。これは、ほとんどのビデオ Web サイトで使用されているファイル形式であるため、問題にはなりません。つまり、ダウンロードしたファイルはすでに拡張子 .mp4 で保存されています。

Opera および Firefox ブラウザでは WebM ビデオ形式が使用されるため、ビデオを WebM ビデオ形式でアップロードする必要もあります。

WebM は、Google によって開発されたロイヤリティフリーのビデオ形式です (当初は On2 Technologies によって開発されました)。これは、HTML5 ビデオ タグ <video> の代わりに Opera と Firefox で使用されます。

公式 WebM プロジェクト Web サイトのツール ページには、ビデオ ファイルを WebM ビデオ形式に変換するのに役立つ多くのプラグインや無料および商用ツールが用意されています。

小さなビデオ ファイルの変換にはそれほど時間はかかりません。

Online-Convert からは、優れたオンライン WebM 変換ツールも利用できます。

ファイルをツールに直接アップロードすることも、すでに Web サイトにビデオをアップロードしている場合はビデオ ファイルの URL にリンクすることもできます。解像度、ビットレート、フレームレートなどのビデオ設定は、ツールを使用して調整できます。ビデオを回転したり反転したりすることもできます。

Online-Convert のファイル変換ツールは優れたリソースです。

最後に「フォールバック写真」を準備する必要があります。何らかの理由でビデオの背景を表示できない場合、この背景写真が表示されます。たとえば、訪問者が正しいビデオ コーデックを備えていない古いブラウザを使用している場合です。

代替写真をビデオの背景と一致させたい場合は、コンピュータでビデオを開き、キーボードの「Print Screen」キーを使用してスクリーンショットを撮ります。次に、画像をフォトエディタに貼り付けてファイルを保存します。あるいは、ビデオの背景に似た外観と雰囲気を持つ独自の写真を使用します。

前のセクションで、ビデオ背景に関する私のお気に入りのリソースは Coverr であると述べました。

私が Coverr を好む理由の 1 つは、ダウンロードした zip ファイルに必要なものがすべて揃っているからです。

各 zip には、MP4、OGV、WebM ビデオ形式のビデオが含まれています。フル HD 解像度 (1920×1080) でのビデオの完全な写真スナップショットも提供されます。

したがって、Coverr からビデオ背景をダウンロードする場合、ビデオ ファイルを準備するためにビデオ変換ツールや写真エディタを使用する必要はありません。

ステップ 3: Beaver Builder を使用してビデオをページに割り当てる

これで 2 つのビデオ ファイルとフォールバック写真が 1 つできたので、Beaver Builder を使用してファイルをページに割り当てることができます。

Web サイト上のページ (ブログ投稿、ページ、またはその他の投稿タイプ) に対して Beaver Builder を起動するには 2 つの方法があります。

最初のオプションは、問題のページのエディターにアクセスすることです。 WordPress エディターに入ったら、「ページ ビルダー」タブをクリックするだけで、そのページの Beaver Builder が起動します。

WordPress ページエディターの例。

あるいは、Web サイトのフロントエンドから Beaver Builder を起動することもできます。

これを行うには、Web サイトにログインして、各ページの上部に管理バーが表示されるようにする必要があります。次に、ビデオの背景を追加したいページを見つけて、ページの上部にある [ページ ビルダー] リンクをクリックします。

Web サイトを閲覧するときに Beaver Builder をロードできます。

上記の両方の例は、Web サイト上の既存の投稿またはページを変更していることを前提としています。ページを最初から作成する場合は、Web サイト上に新しいページを作成し、Beaver Builder テンプレート ボックスから空のテンプレートを読み込みます。これにより、空白のキャンバスからページの作成を開始できます。

Beaver Builder ツールバーの「テンプレート」リンクをクリックして、レイアウト テンプレート選択ボックスをロードします。

以下の例では、コンテンツの既存のページに背景ビデオを追加しています。

Beaver Builder がアクティブになった状態で、ビデオの背景を追加したい領域にマウスを置くと、行の一番上にアイコンのリストが表示されます。

スパナ アイコンをクリックして行設定をロードします。

行設定アイコンを選択します。

行設定ボックスが読み込まれると、デフォルトでスタイル タブになります。

「背景」というタイトルのセクションまで下にスクロールします。ドロップダウン ボックスには、[なし]、[カラー]、[写真]、[ビデオ]、[スライドショー]、および [視差] の 6 つのオプションが表示されます。

「ビデオ」を選択します。

行設定ボックスで背景としてビデオを選択します。

これにより、ビデオを MP4 および WebM 形式でアップロードするオプションと、フォールバック写真をアップロードするオプションが表示されます。

3 つの異なるフィールドが表示されます。

「ビデオを選択」または「写真を選択」をクリックすると、WordPress メディア ライブラリがロードされます。各ファイルをアップロードすることも、ファイルがすでにアップロードされている場合はメディア ライブラリから選択することもできます。

ビデオ ファイルと代替写真の両方をアップロードします。

すべてのファイルをアップロードすると、行設定ボックスは次のようになります。

すべてのファイルがアップロードされました。

この時点で、行設定ボックスを保存できます。必要に応じて、行設定ボックスをテンプレートとして保存し、Web サイト全体でグローバルにすることもできます。

以下に示すように、ビデオがテキストの背景に表示されています。

ビデオの背景を設定した後のページの見え方。

背景ビデオがコンテンツ領域の全幅に収まらない場合 (たとえば、使用しているテーマが原因)、設定ボックスでコンテンツの幅を全幅に変更します。この領域からページの幅と行の高さを調整することもできます。

レイアウトをさらに変更する必要がある場合は、行のパディングとマージンを変更できる「詳細」タブを確認してください。モバイル デバイスでのレイアウトの外観を定義し、この領域から CSS セレクターを適用することもできます。

必要に応じて、ページの幅を全幅に調整します。

前に示したビデオの背景の例では、ページ上のテキストがビデオの背景に対して目立たないことに気づいたかもしれません。

この問題は、行で使用されている色を調整することで解決できます。テキストの色、リンクの色、リンクホバーの色、見出しの色はすべて変更できます。

コンテンツを目立たせるために色を調整します。

背景オーバーレイは、ビデオを際立たせたり、背景にフェードインさせたりするのに役立ちます。これは、ビデオを思いどおりに表示できるため、非常に便利です。

背景オーバーレイは、ビデオの外観を変更する効果的な方法です。

希望の外観が得られるまで、オーバーレイの色と不透明度を試してみることをお勧めします。下のスクリーンショットでは、不透明度 50% の赤いオーバーレイ カラーを適用したときにビデオの背景がどのように見えるかを確認できます。

Beaver Builder の不透明度機能を必ず活用してください。

行に境界線を適用することもできます。実線、破線、点線、または二重境界線を選択できます。境界線の色、不透明度、幅も定義できます。

コンテンツ領域の周囲に枠線を配置できます。

Beaver Builder は、最新のすべてのブラウザで動作する応答性の高いソリューションですが、それでも、ページが希望どおりに表示されることを確認するために、さまざまなブラウザでページをチェックすることが賢明です。

ビデオの背景はページを生き生きとさせるのに役立ちます。

Beaver Builder を使用してビデオの背景を追加する方法を理解すると、数分でページにビデオの背景を適用できるようになります。 Web サイト上のさまざまなビデオをテストして、何が機能し、何が機能しないのかを確認できるように、最初は 12 個ほどのビデオをダウンロードすることをお勧めします。

最終的な考え

ここでは、Web サイトでビデオの背景をどのように使用できるかについてほんの表面をなぞっただけです。

Beaver Builder を使用すると、ページ上に独自のレイアウトを作成し、そこに数十のコンテンツ モジュールと WordPress ウィジェットを追加できます。上の例では、テキストの背後にビデオを背景として適用する方法を示しましたが、ビデオの背景は何にでも適用できます。

たとえば、コンテンツ スライダー、ギャラリー、価格表、投稿カルーセルの背景として、またはランディング ページの一部としてビデオを表示できます。本当にできることには制限がありません。

このチュートリアルを楽しんでいただき、役に立ったと思っていただければ幸いです。もしそうなら、Facebook、Slack、Twitter で私たちをフォローすることをお勧めします。

今後数か月間、Beaver Builder ブログを必ずチェックしてください。素晴らしいコンテンツとチュートリアルが予定されています。

幸運を。
ケビン

ケビン・マルドゥーンについて

Kevin Muldoon は旅行が大好きなプロのブロガーです。彼は、個人のブログやインターネット マーケティング ディスカッション フォーラムの Rise Forums でインターネット マーケティングについて定期的に執筆しています。