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

ビデオの背景は、Webサイトの最もすばらしい機能の1つです。 それはあなたのウェブサイトを活気に満ちた面白いものにするだけでなく、より多くの画像や情報を表示することもできます。 ただし、Webサイトにビデオの背景を追加する方法を知っている人はあまりいないでしょう。 したがって、この究極のガイドは、Webサイトにビデオの背景を追加する場合に役立ちます。

ビデオの背景をサポートするWordPressテーマを使用する

一部のWordPressテーマはビデオの背景の表示をサポートしているため、テーマを設定してそれを紹介する必要があります。

たとえば、このClean Blocksテーマは、ヘッダーカバー領域のビデオ背景をサポートします。 次に、カスタマイザーに移動し、ヘッダーメディアセクションを見つけて、テーマの要件に従うことにより、ビデオを挿入するためのいくつかの簡単な手順が必要です。

ほとんどのテーマでは、ビデオをアップロードできます。 その上、私が上でしたように、多くはYouTubeからの埋め込まれたリンクをサポートします。 これは、より速く、より簡単になるだけでなく、ウェブサイトをより軽くするのに役立ち、それによってウェブサイトの速度を最適化します。 各テーマはさまざまな方法でカスタマイズされるため、手順を注意深く読む必要があります。

ただし、テーマは特定の領域で実行されているビデオのみをサポートする場合があるため、テーマを使用すると、ビデオの背景領域が制限される場合があります。 別の領域にビデオの背景を追加したい場合はどうなりますか？ プラグインを使用して、WordPressWebサイトにビデオの背景を追加します。

プラグインを使用してビデオの背景をWebサイトに追加する

これを支援するプラグインはたくさんあります。 調査した結果、Advanced WordPress Background（AWP）プラグインは、テクノロジーについてあまり詳しくない人にとって非常に使いやすいことがわかりました。 また、ビデオの背景を美しく表示するのに役立ち、多くのカスタマイズオプションを提供します。

このプラグインは、WordPress5.0バージョンとGutenbergエディターでのみ機能することに注意してください。 したがって、WordPressのバージョンを更新し、このエディターを使用することを忘れないでください。

ステップ1：プラグインをインストールする

このプラグインはwordpress.orgからダウンロードして、[ダッシュボード] > [プラグイン] > [新規追加] > [プラグインのアップロード]に移動し、アップロード、インストール、アクティブ化できます。

または、[ダッシュボード] > [プラグイン] > [新規追加]でプラグインを見つけ、[インストール]> [アクティブ化]をクリックします。

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

ビデオの背景を追加することは、グーテンベルクにブロックを挿入することに似ています。 したがって、グーテンベルクに精通している場合は簡単です。 そうでない場合は、グーテンベルクの使用方法を読むことができます。

ビデオの背景を追加するページまたは記事に移動し、新しいブロックを追加し、キーワード「awb」を検索して、AWBの背景ブロックを見つけます。

このブロックを挿入した後、右側のサイドバーで[ブロック]タブを選択して設定します。 背景には、画像、色、ビデオの3つのオプションがあります。 ビデオを選択して、ビデオの背景を挿入します。 次に、2つのオプションがあります。YouTubeまたはVimeo URLからビデオを挿入するか、セルフホストビデオをアップロードします。

最初のオプションを選択した場合は、リンクを[ビデオURL]セクションに挿入するだけです。

2番目のオプションについては、「セルフホスト」セクションに移動します。 アップロードするビデオ形式は3種類あります。

必要な形式を選択してから、ライブラリ内の既存のビデオを選択するか、新しいビデオをアップロードします。 それでおしまい。

ステップ3：ビデオの背景をカスタマイズする

フルハイトでビデオを表示し、ビデオにブロックを追加します

ビデオを挿入した後、そのフレームはこのようにとても小さいです。 ビデオをフルハイトで表示するには、ブロックのツールバーのフルハイトセクションを選択します。

以下は、テキスト付きでフルハイトで表示されたビデオの背景です。 通常、サイドバーの[ブロック]タブで、テキストのサイズ、色、位置などをカスタマイズできます。 これは、この動画をヘッダーカバーまたは召喚状のセクションに配置する場合に役立ちます。

テキストを任意のブロックに置き換えることもできます。 これは、グーテンベルクブロックを挿入するのとまったく同じです。

ビデオ設定

[ビデオ]タブで、ビデオの背景を便利に表示するために、以下のようにいくつかの主要なセクションを設定する必要があります。

（1）：モバイルデバイスでバックグラウンドビデオを有効または無効にできます。
（2）と（3）：特に元のビデオが長すぎる場合は、目的の部分を表示するために、ここにビデオの開始時刻と終了時刻を入力します。
（4）：終了時にビデオを繰り返すことができます。 ビデオの自動再生を維持するには、この機能を有効にする必要があると思います。

ポスター画像の設定

下にスクロールすると、[ポスター画像]セクションが表示されます。 ここで選択した写真は、ビデオが表示される1秒前に表示されます。 以下のオプションを使用すると、画像の適切なサイズとスタイルをカスタマイズできます。

ポスター画像を追加した後の結果です。

オーバーレイをインストールする

（1）はビデオ背景のオーバーレイ色、（2）はオーバーレイの透明度です。 たとえば、オレンジは私のサイトの主要なトーンであるため、Webのデザインと一致するように、この色をビデオのオーバーレイに選択しました。

カラーパレットは、ビデオの代わりになります。 つまり、実際にはビデオの背景からカラーの背景に切り替えます。 この色の背景を削除するには、[クリア]ボタンを選択します。

視差とマウスの視差効果をインストールします

[視差]タブでは、これらの効果をオンまたはオフにして、さまざまなタイプの視差を簡単に選択できます。 これは非常に素晴らしく興味深い効果なので、それを使用してサイトに適したスタイルを選択する必要があります。

視差効果はおなじみかもしれませんが、マウス視差効果はそうではないかもしれません。 ビデオの上にマウスを移動すると簡単に確認でき、ビデオ内のシーンも移動します。

この効果を使用するには、[マウス視差] > [有効化]セクションに移動します。 次に、サイズと速度を調整できます。 速度が遅いほど、ビデオの動きは速くなります。 サイズが小さいほど、ビデオの動きが大きくなり、マウスを動かしたときにビデオが「ぎくしゃくした」ように感じられます。

これは、最低の速度とサイズを選択した場合の例です。

間隔設定

間隔]タブ、ページの余白にビデオからカスタムまでの距離で、マージンとパディングセクションに距離パラメータを入力します。 たとえば、ビデオの4つの面すべてに10のパディングと20のマージンを入力しました。

高度な設定

[詳細設定]セクションの[追加のCSS]で、ビデオの背景にカスタムコードを追加できます。 また、 HTMLアンカーセクションでは、ビデオの見出しにキーワードリンクを使用できます。 ショートコードについて何も知らない場合は、この部分をスキップできます。

そしてこれが最終結果です。 ビデオはとても素敵に見えますね？

最後の言葉

この非常に詳細な記事を通じて、訪問者を引き付けるためにWordPressWebサイトにビデオの背景を追加できることを願っています。 AWBプラグインについては、eStarなどのグーテンベルクを強力にサポートするテーマで使用する必要があります。 ここでは、eStarテーマとAWBプラグインを使用して、ヘッダーカバーの魅力的なビデオ背景を作成しました。

この完璧な組み合わせにより、ビデオがより魅力的に見えるかもしれませんね。 WordPressのヒントをもっと知りたい場合は、この記事の下にコメントして、考えを共有することを躊躇しないでください。