WordPressでビデオ背景セクションを作成するにはどうすればよいですか？

Webサイトの視覚的な魅力を高める効果的な方法は、ビデオの背景セクションを作成することです。 それはあなたの訪問者を興味をそそり、彼らがあなたのサイトに長く滞在することを奨励します。

WordPressは、ビデオの背景を統合できるさまざまなアプローチを提供します。

これらの方法のいずれかがわからない場合は、プロセスをご案内します。

このブログでは、背景セクションとしてビデオを追加するための3つの手間のかからないテクニックを学びます。

＃WordPressでビデオの背景が必要なのはなぜですか？

私たちは皆、魅力的な背景画像をWebサイトに追加することの重要性を知っています。 彼らはあなたの聴衆の注意を引き付け、書面による説明よりも速くコミュニケーションします。

ただし、別の形式のメディアは、写真、グラフィックス、およびその他のイラストよりも100倍強力です。 あなたがビデオについて考えているなら、あなたはあなたの背中を軽くたたくことができます！

YouTubeブログの2人のゲストブロガーは、ビデオが写真の効果のないコミュニケーションよりも優れていることを証明する統計を提供しました。 画像が千の言葉を話すと聞いたことがありますか？

さて、これらのゲストブロガーの洞察によると、ビデオは百万の言葉を話します。

したがって、Webサイトの背景としてビデオを追加して、重要な情報を視聴者に伝えることができます。 ブランドのストーリー、製品の動作メカニズムなどを説明する短いビデオを追加できます。

ビデオセクションはあなたのウェブサイトの訪問者がそれに従事することを奨励します。 メディアの音量を上げたり、プレーヤーを拡大したり、ビデオ全体を再生したりする場合があります。

その上、あなたの聴衆は紹介ビデオを見た後にあなたのブランドについてもっと知りたいと思うでしょう。 訪問者がWebサイトに長時間滞在すると、バウンス率が低下し、SEOのパフォーマンスも向上します。

＃完璧なビデオ背景を選択するためのヒント

これで、Webサイトでのビデオ統合の重要性がわかりました。 WordPressサイトに追加する優れたビデオを選択するためのヒントをいくつか紹介します。 ここにあなたが役立つと思うかもしれない5つの重要なポイントがあります。

1.圧縮されているが高品質のビデオ

バックグラウンドセクションにアップロードする前に、ビデオファイルを圧縮する必要があります。 ビデオサイズが大きいWebサイトは読み込みが遅く、ひどいユーザーエクスペリエンスを提供します。

さらに、Googleは関連する検索結果の上位の結果にあなたのサイトをランク付けしません。 ビデオを圧縮すると、サーバーへの負荷が少なくなり、Webサイトの実行速度が向上します。

ただし、圧縮中にビデオの品質を損なわないように注意してください。 視聴者はぼやけたビデオを見たくありません。 あなたはビデオが圧縮されているが、それでもまともな解像度を持っている中間点を見つける必要があります。

ビデオを最適なサイズに圧縮できるVideoProcなどのツールを使用できます。 VideoProc Converterツールは、GoPro、DJI、iPhone、Android、カムコーダー、またはその他の4kカメラで撮影したすべてのビデオで機能します。

2.短いビデオクリップの長さ

あなたのウェブサイトにビデオを追加する際に考慮すべきもう一つのことは、それを短くすることです。 まず第一に、オンラインオーディエンスの注目度は低いです。 彼らはあなたの会社全体の歴史を提供する30分のビデオを見ません。

代わりに、ファイルサイズを小さくして1分未満の短い動画をアップロードしてください。 ロードには短時間かかり、Webサイトの訪問者の注意も引き付けます。 また、ストックフッテージをループ状に配置することもできます。

3.あなたのウェブサイトのコンテンツを褒める

あなたの訪問者はそれがあなたのウェブサイトのコンテンツを補完する場合にのみビデオを楽しむでしょう。 たとえば、あなたがコーヒーショップのサイトを所有している場合、スポーツバイクのビデオは確かにあなたのサイトを補完するものではありません。

文脈から外れると、視聴者を苛立たせ、注意を失う可能性が高くなります。 したがって、背景に追加するブランドの適切なビデオを作成します。 代わりに、関連するストック映像を表示することもできます。

4.オーディオを有効/無効にするオプション

誰かがあなたのサイトに入るとき、彼らは自動再生オーディオを期待していないかもしれません。 あなたの聴衆は図書館、オフィス、教室、または他の静かな場所であなたのウェブサイトを閲覧することができます。 突然の音が彼らを驚かせ、彼らはそれを取り除くためにタブを閉じます。

マルチメディアコンテンツの自動再生は、人々が嫌うWebサイトの属性の1つです。 オーディオを有効/無効にするトグルオプションを追加することで、この状況を回避できます。 このように、訪問者は必要を感じたときにのみオーディオを再生できます。

5.レスポンシブビデオの背景セクション

Webサイトの訪問者は、さまざまなデジタルデバイスでコンテンツを閲覧します。 たとえば、モバイルデバイスやラップトップなどで動画を視聴する場合があります。 レスポンシブビデオは、これらすべての画面サイズで同じサイズを提供するわけではありません。

したがって、ビデオの背景をレスポンシブにする必要があります。 この機能を使用すると、すべてのディスプレイデバイスに正しいサイズでビデオが読み込まれます。

＃ビデオ背景セクションを作成する3つの方法

Webサイトの背景セクションとしてビデオを追加する主な方法は3つあります。 このセクションでは、各テクニックの詳細な説明を取得します。 好みに応じて、これらのオプションのいずれかを選択できます。

1.Webサイトビルダーを使用してビデオ背景セクションを作成します

Webサイト/ページビルダーは、コード（HTML、CSSなど）を使用せずにWebページを設計するのに最適です。 これらのツールは、カルーセルスライダー、画像ライトボックス、アニメーションなどのさまざまなマルチメディアコンポーネントを追加するのにも役立ちます。

1. Elementorウェブサイトビルダー

Elementorは、オールインワンのWebサイト構築プラグインです。 ヘッダー、フッター、製品ページなどのさまざまな要素をデザインできます。このページビルダーは、ほぼすべてのWordPressテーマとプラグインをサポートしています。

まず、[新しいプラグインの追加]ページからこのページビルダーをインストールします。 検索バーに移動して、「Elementor」を探します。 次に、発行元の名前を持つ最初のオプションであるElementor.comをインストールしてアクティブ化します。

次に、ダッシュボードに戻り、サイドバーのElementorオプションの上部にマウスカーソルを置きます。 ドロップダウンメニューから[はじめに]ボタンをクリックします。

このアクションにより、Elementorのウェルカムページに移動します。 「最初のページを作成」ボタンが表示されます。 それをクリックして続行してください。

Elementor WebsiteBuilderのドラッグアンドドロップ編集インターフェイスにアクセスします。 このプラグインを使用して新しいページテンプレートを作成しましょう。 スクリーンショットに示されているように、点線のボックス内に表示されているフォルダアイコンをクリックします。

事前にデザインされた多数のページテンプレートを含むポップアップウィンドウが表示されます。 選択したレイアウトの上にマウスポインタを置きます。 このアクションにより、[挿入]ボタンが表示されます。このボタンをクリックして、テンプレートをWebサイトに追加する必要があります。

レイアウトの1つを選択すると、別のウィンドウが表示されます。 [はじめに]ボタンをクリックすると、Elementorの[サインアップ]ページに移動します。 続行するには、このビルダープラグインでアカウントを作成してください。

Elementorは、Webサイトをそのテンプレートライブラリに接続するオプションを提供します。 [接続]ボタンをクリックします。 その後、編集インターフェースに戻ります。

ビデオを背景として表示するセクションを選択できます。 サイズを調整する場合は、上部にある6つのドットで示されている[セクションの編集]ボタンをクリックします。

これで、レイアウトオプションから、高さ、幅、ギャップなどの設定を変更できます。

このセクションを調整した後、[スタイル]オプションに移動してください。 画像、ビデオ、グラデーション、スライドショーの4つの異なる背景タイプを選択できます。 ビデオアイコンを選択し、テキストボックスにYouTubeビデオのURLを貼り付けます。

YouTubeビデオを表示したくない場合は、代わりにMP4形式のファイルをアップロードできます。 この方法では、メディアライブラリからそのビデオのパーマリンクをコピーする必要があります。 その後、Elementorのインターフェイスの同じテキストボックスに貼り付けます。

次に、選択したビデオの他の設定を調整できます。 たとえば、セクションの背景色のオーバーレイをカスタマイズできます。 さらに、モバイルデバイスでビデオを再生するかどうかを選択できます。

動画の読み込みに失敗した場合に表示されるフォールバック画像をアップロードすることもできます。 最後に、バックグラウンドビデオに満足したら、[公開]ボタンをクリックします。

2. WordPressページビルダー–ビーバービルダー

Beaver Builderを使用すると、柔軟なドラッグアンドドロップインターフェイスを使用してWebサイトのフロントページを編集できます。 写真、ボタン、見出し、アイコン、オーディオ、ビデオなど、さまざまなコンテンツモジュールをサポートしています。

このビルダー拡張機能をWordPressダッシュボードに追加するには、[新しいプラグインの追加]に移動してください。 その名前を検索バーに挿入し、300,000以上のアクティブなインストールがある最初のオプションを選択します。

この拡張機能をインストールしてアクティブ化し、マルチメディア背景を追加するページに移動する必要があります。 新しいページを作成する場合は、[ページ]オプションのドロップダウンメニューにある[新規追加]ボタンをクリックします。

新しいページの編集インターフェースに入ります。 このドラッグアンドドロップビルダープラグインをインストールしたので、フロントエンドからページをカスタマイズできます。 スクリーンショットに示されているように、[ビーバービルダーの起動]ボタンをクリックしてください。

このアクションにより、フロントエンド編集インターフェースに移動します。 Beaver Builderは、オーディオ、見出し、写真などのさまざまなモジュールを右側のサイドバーに表示します。ビデオアイコンをクリックして、点線のボックスにドラッグします。

ビデオブロックを作成し、ビデオ設定を調整するためのウィンドウを開きます。 最初に、メディアライブラリと埋め込みの2つのオプションからビデオタイプを設定する必要があります。 最初の選択肢を選択した場合は、MP4またはWebMファイル形式のいずれかからビデオをアップロードできます。

これらのオプションのいずれかから[ビデオの選択]ボタンをクリックします。 メディアライブラリからビデオを選択するか、ドライブからアップロードする必要があります。 Beaver Builderを使用すると、ポスターのアップロード、自動再生、ループトグルなどのいくつかの調整を行うことができます。

逆に、[ビデオ埋め込み]オプションを選択すると、YouTubeビデオのURLを貼り付けることができます。 URLを挿入すると、バックグラウンドでビデオのプレビューが表示されます。 最終編集を行ったら、[保存]ボタンをクリックします。

Beaver Builderは、埋め込みビデオのプレビューをインターフェイスに表示します。 右上隅にある[完了]ボタンをクリックしてください。 その後、[破棄]、[ドラフトの保存]、[公開]、[キャンセル]の4つの新しいボタンが表示されます。

その後、[公開]をクリックして、更新を保存します。 Webサイトをロードして、ビデオの背景がどのように機能しているかを確認することをお勧めします。 Webサイトページビルダーに代わるものが必要な場合は、次のセクション「プラグイン」を参照してください。

2.WordPressプラグインを使用してビデオ背景セクションを作成します

プラグインは、Webサイトに機能を追加するための優れた方法です。 さまざまな拡張機能から選択して、サイトにビデオの背景を追加するオプションがあります。 2つのプラグインを使用してこの機能を追加するプロセスについて説明しました。

1. 高度なWordPressの背景

Advanced WordPress Backgroundsを使用すると、さまざまな背景タイプを表示できます。 たとえば、画像、パターン画像、色、アップロードされたビデオ、およびYouTube / Vimeoビデオを追加できます。

WordPressダッシュボードの[新しいプラグインの追加]ページをご覧ください。 検索バーに「AdvancedWordPressBackgrounds」と入力し、結果から最初のオプションをインストールします。

プラグインをインストールした後、プラグインをアクティブにします。 次に、ビデオの背景セクションを追加するページに移動します。 このチュートリアルでは、当社のWebサイトのホームページを選択しました。 ページタイトルの下部にある[編集]ボタンをクリックしてください。

ホームページの編集レイアウト内で、プラス（+）記号をクリックして検索バーを開きます。 「AWB」という用語を入力し、背景（AWB）ブロックオプションを選択します。 ページに新しいブロックが追加されます。

このブロックでは、色、画像、またはビデオのいずれかを追加できます。 ブロック設定バーの[タイプ]ボタンをクリックします。 下のスクリーンショットに表示されているドロップダウンメニューから[ビデオ]オプションを選択します。

このプラグインは、2つの方法を使用してビデオを追加するためのインターフェースを提供します。 まず、右側のサイドバーにある[ブロック]ボタンをクリックします。 ビデオオプションのすぐ下で、YouTube / Vimeoまたはセルフホストオプションのいずれかを選択できます。

YouTube / Vimeoのオプションを選択すると、ビデオのURLを入力するためのテキストボックスが表示されます。 また、再生したい場所から正確に開始するようにビデオの開始時間を設定することもできます。

もう1つのオプションは、セルフホストビデオです。 MP4、OGV、WEBMの3つの形式のいずれかを選択すると、動画をアップロードできます。 これらのボタンの1つをクリックして、メディアライブラリからビデオを選択します。  

ライブラリにビデオがない場合は、ドライブからビデオをアップロードしてください。 ビデオを挿入すると、同じサイドバーにそのプレビューが表示されます。 その後、ページ上部の[公開]ボタンをクリックします。

2. 背景ビデオ用のmb.YTPlayer

バックグラウンドビデオ用のmb.YTPlayerプラグインを使用すると、YouTubeビデオをWebサイトに統合できます。 プロバージョンでは、ビデオの不透明度、品質、アスペクト比、およびその他の機能を編集できます。

以前のプラグインと同様に、[新しいプラグインの追加]ページからmb.YTPlayerをインストールできます。 以下に示すようにキーワードを挿入し、WordPressアカウントでアクティブ化します。

インストール後、WordPressダッシュボードに移動してください。 その後、左側のサイドバーにある「mb.ideas」オプションにマウスカーソルを合わせます。 ドロップダウンメニューに表示されるYTPlayerボタンをクリックします。

YT.Player拡張機能の編集インターフェースに入ります。 まず、トグルボタンをクリックして、背景ビデオをアクティブにします。 その後、スクリーンショットに表示されているように、テキストボックスにYouTubeビデオのURLを挿入します。

ページを下にスクロールすると、ビデオを統合するページを選択するためのセクションが表示されます。 デモ用に静的ホームページを選択しました。 編集が終了したら、[変更を保存]をクリックできます。

変更を保存すると、このページに選択したビデオのサムネイルが表示されます。 カンマで区切って複数のビデオURLを追加することもできます。 視聴者は、ウェブサイトにアクセスするたびに、これらの動画をランダムに見ることができます。

3. アニメーション、ビデオの背景、イントロメーカーを備えたスライダーヒーロー

Slider Heroプラグインは、Webサイトのレスポンシブスライダーを作成するのに役立ちます。 スライダーには、テキストカルーセル、Call-to-Action（CTA）ボタン、およびその他のいくつかの要素を追加できます。 また、背景セクションとしてビデオを追加することもできます。

他の無料の拡張機能と同様に、WordPressの[新しいプラグインの追加]ページからインストールできます。 検索バーにキーワード「SliderHero」を入力します。 パブリッシャーの名前としてQuantumCloudを持つ最初のオプションを選択します。

次に、ダッシュボードに移動して、サイドバーでSliderHeroオプションを検索する必要があります。 その上にマウスカーソルを置くと、ドロップダウンメニューが表示されます。 メニューから[新しいスライダー]ボタンをクリックします。

これで、このプラグインの編集インターフェースが表示されます。 それはあなたが選択するための7つの異なるスライダー効果を提供します。 編集するスライダーオプションをクリックします。 最初のオプションを選択しました：効果なし。

次のページには2つのセクションがあります。 最初のものではスライダーを追加でき、次のものではその効果をカスタマイズできます。

左側のセクションの上部にあるプラス（+）記号をクリックすることをお勧めします。 タイトルと説明を書くことができるドラフトスライドを作成します。 さらに、それぞれに2つのCTAボタンを追加できます。

右側のセクションに移動して、メニューバーの[ビデオ設定]オプションを選択する必要があります。 これは、3つのビデオ背景の選択肢を含むドロップダウンメニューを示しています。 YouTubeビデオの背景オプションを選択します。

他の2つのオプションは、プレミアムプラグインバージョンでのみ使用できます。

Slider Heroは、このアクションでさまざまなビデオスライダー設定を表示します。 YouTubeビデオのIDを含むテキストボックスが表示されます。 このコードを取得するには、ビデオのURL全体をこのスペースに貼り付けることができます。

調整が完了したら、[保存]ボタンをクリックしてください。 変更を保存したら、メニューバーの右隅にある[ショートコード]オプションをクリックします。 Slider Heroは、サイトの任意のページに貼り付けることができるショートコードを提供します。

上で強調表示されているコードをコピーして、メモ帳に貼り付けます。 これで、WordPressサイドバーで[ページ]オプションを探すことができます。 その上にマウスポインタを置くと、ドロップダウンメニューが表示されます。

その後、[新規追加]をクリックして新しいページを作成する必要があります。 新しいページに入るときは、本文領域にショートコードを貼り付ける必要があります。 編集が終了したら、[下書きを保存]ボタンをクリックします。

[プレビュー]ボタンをクリックして、ビデオがどのように機能しているかを確認することもできます。 他のページ要素の追加が完了したら、[公開]ボタンをクリックします。

以下のスクリーンショットは、背景ビデオがどのように表示されるかを示しています。

3.WordPressテーマを使用してビデオ背景セクションを作成します

ビデオの背景を統合する簡単な方法は、この機能をサポートするWordPressテーマをインストールすることです。 マルチメディアをサポートするテーマを使用すると、サイトにビデオセクションを追加するための外部拡張機能は必要ありません。

ビデオの背景をサポートする強力なテーマを持つ3つのWebサイトを次に示します。

1. WordPress.org –無料のテーマリポジトリ

WordPress.orgには、Webサイトを強化するためのさまざまな無料のテーマとプラグインが含まれています。 最小限のセットアップで動作します。 さらに、このオープンソースツールを使用すると、ストーリー、製品、およびサービスを便利に共有できます。

検索バーから関連するテーマを検索できます。 「ビデオの背景」という用語を入力し、その結果から項目のいずれかを選択します。 さらに、任意のテンプレートをダウンロードして、WordPressダッシュボードにインストールできます。

ダウンロードする前に説明を読んで、追加したい機能をサポートしていることを確認してください。 テーマのZIPファイルをWordPressアカウントにアップロードし、後でアクティブ化する必要があります。

2. テーマフォレスト–プレミアムWordPressテーマ

テーマフォレストには、WordPress、eコマース、マーケティング、CMSなどの何千ものテーマとテンプレートが含まれています。これらは世界最大のテーママーケットプレイスであり、さまざまなプロジェクトに固有のアイテムがあります。

プレミアムWebテンプレートが必要な場合は、このWebサイトをお勧めします。 WordPress.orgと同様に、関連するテーマを検索するにはキーワードを入力する必要があります。 価格、ベストマッチなどに基づいて結果を並べ替えることができます。

WordPressダッシュボードにインストールした後、ビデオの背景を追加するには、そのドキュメントを読む必要があります。 関連する指示が含まれていない場合は、サポートチームに連絡する必要があります。

3. Raraテーマ–無料およびプレミアムのWordPressテーマ

Rara Themesには、最高のWebサイトテンプレートのコレクションがいくつかあります。 彼らのテーマは、旅行、ビジネス、教育、ファッション、個人のブログなど、さまざまなニッチのWebサイトを作成するのに理想的です。 各Webサイトのテンプレートを使用すると、ヘッダーの背景にビデオを統合できます。

この目的のために、無料とプレミアムの両方のテーマを使用できます。 その製品の1つを使用してビデオ背景セクションを設定する方法を説明します。 このデモンストレーションでは、ChicLiteを選びました。

このテーマをインストールしてアクティブ化し、WordPressダッシュボードに移動してください。 サイドバーの[外観]オプションにマウスポインタを合わせます。 次に、ドロップダウンメニューから[ヘッダー]ボタンをクリックします。

このアクションでは、バナーセクションのフロントページのカスタマイズ設定を入力します。 左側のサイドバーにヘッダービデオを追加するためのタイトルが表示されます。 以下に示すように、[ビデオの選択]ボタンをクリックします。

メディアライブラリページが表示され、表示するビデオを選択できます。 アップロードする予定のビデオを選択し、[ビデオの選択]ボタンをクリックします。 ファイルのタイトル、キャプション、説明を変更できます。

ビデオをまだアップロードしていない場合は、[ファイルのアップロード]セクションに移動する必要があります。 ライブラリにビデオを追加して、ヘッダー領域に表示することを選択できます。

カスタマイズ設定に戻ると、選択したビデオのサムネイルが表示されます。 さらに、YouTubeビデオを統合する場合は、下で強調表示されているスペースにそのURLを入力できます。

ビデオは音声なしで自動的に再生されます。 視聴者は、Webサイトを閲覧している間、ビデオを一時停止して再生するオプションを利用できます。

ビデオ背景セクションのストックフォトはどこにありますか？

今まで、あなたはあなたのウェブサイトにビデオの背景を追加する方法について明確な考えを持っている必要があります。 しかし、挿入する既製のビデオはありますか？ そうでない場合は、簡単にできるようにさせてください。

あなたがビデオメーカーであるか、あなたのプロジェクトのためにそれを雇ったならば、あなたはそれについて心配する必要はありません。 ただし、サイトの美観を高めるために一般的なビデオクリップが必要な場合は、ストックフッテージを使用できます。

ストックフッテージは、著作権の問題なしに使用できるロイヤリティフリーのコンテンツです。 プレミアムと無料の両方のストックビデオを提供する4つのWebサイトのリストを見てみましょう。

1.シャッターストック

Shutterstockを使用すると、画像、グラフィック、音楽、映像などのさまざまなマルチメディア要素をダウンロードできます。Google、BuzzFeed、Marvel、およびその他の評判の高いブランドは、ストックライブラリを利用して創造性を高めています。

動物/野生生物、休日、科学、教育、自然などのトピックに基づいて動画を分類できます。 Shutterstockには、4K、HD、SD品質の100万本以上のストックビデオがあります。

2.Envato要素

Envato Elementsには、グラフィックテンプレート、ビデオ、オーディオ、写真、フォントなど、5,000万を超えるデジタル資産があります。自然、ビジネス、背景用のあらゆる種類のbロールフッテージとビデオクリップを入手しました。

3.ペクセル

Pexelsは、画像とビデオの無料のライブラリです。 家、カフェ、自然、子供、家族など、あらゆる映像カテゴリを検索できます。 また、クリエイターをサポートしたい場合は、クリエイターに寄付することもできます。

4.Pixabay

Pinterestには、180万枚以上のストックフォトとビデオを備えた才能あるクリエイターのコミュニティがあります。 クレジットを付与せずに、要素を使用、変更、および配布することができます。 Pexelsと同様に、必要に応じて1人以上のクリエイターを寄付することができます。

よくある質問（FAQ）

まとめ！

このブログのヒントとテクニックを使用して、背景として優れたビデオを作成できます。 この機能をWebサイトに追加するためのプラグイン/拡張機能をもう少し知っていますか？ 以下のコメントセクションであなたの答えを共有してください。

また、私たちのブログは有益だと思いましたか？ 今後のコンテンツを改善できるよう、誠実なフィードバックをお寄せください。