ウェブサイトに WordPress 動画の背景を簡単に追加する 3 つの方法

公開: 2021-12-11

WordPress サイトで動画の背景を使用することは、競合他社よりも目立つようにし、より多くの視聴者を引き付けるための優れた方法です。 これは、ビデオの背景を使用すると、視聴者によりよくメッセージを伝え、視聴者を楽しませることができるからです。

サイトに WordPress ビデオの背景を追加する方法を見つけている場合は、次のヒントとガイドが非常に役立ちます。

目次
[表示][非表示]
  1. サイトに WordPress 動画の背景を追加する必要があるのはなぜですか?
  2. サイトに WordPress ビデオ背景を追加する方法に関するいくつかの役立つヒント
  3. WordPress のビデオ背景はどこで入手できますか?
  4. ウェブサイトに WordPress 動画の背景を追加する 3 つの方法
    1. ビデオ背景をサポートする WordPress テーマを使用する
    2. ページビルダーを使用する
      1. グーテンベルグ
      2. Elementorページビルダー
    3. WordPress 動画背景プラグインを使用する
      1. スマートスライダー 3
      2. ビデオ プレーヤーと全画面ビデオの背景
      3. 画像と動画のフルスクリーン背景 WordPress プラグイン
  5. 最後の言葉

サイトにWordPress 動画の背景追加する必要があるのはなぜですか?

以下は、サイトに WordPress ビデオ背景を追加することのいくつかの利点です。

  • WordPress Web サイトにクールでユニークなスタイルを追加します。
  • ビデオの背景は魅力的です。 ユーザーがウェブサイトにアクセスすると、スクロールするのではなく、ビデオを見るために立ち寄ります。
  • ビジネスの重要な側面を強調するのに役立ちます。
  • あなたのウェブサイトの主要なビジョンを容易に引き出します。
  • あなたのサイトをより共有しやすくし、ウェブサイトへのトラフィックを増やします。

サイトに WordPress ビデオ背景を追加する方法に関するいくつかの役立つヒント

先に進む前に、WordPress の動画背景をサイトに追加する際に覚えておくべき役立つヒントをいくつか紹介します。

  • アップロードする動画の解像度が高いことを確認してください。
  • ビデオがページの読み込み速度に影響を与えすぎないようにしてください。 必要に応じて圧縮します。
  • 動画の背景は完全にレスポンシブである必要があります。 そのため、すべての画面とデバイスで見栄えがします。
  • 音声付き自動再生をオフにします。 そうしたい場合は、訪問者がオーディオをオフにするオプションを持っていることを確認してください。
  • Web ブラウザーが動画の背景をサポートしていない訪問者のために、代替の背景画像を設定します
  • 短い動画の背景をアップロードする必要があります。

WordPressの動画背景はどこで入手できますか ?

動画の背景は、特にホームページにある場合、多くのトラフィックを獲得する可能性があります。 したがって、それを目立たせて、できるだけ多くの訪問者を引き付けたいと思うでしょう.

予算が限られている場合は、地元のビデオグラファーに連絡してビデオを撮影してもらいます。 ビデオがブランディングのニーズを満たすように、アイデアを明確に表現してください。

動画を撮影する時間もお金もありませんか? 問題ない。 Storyblocks や Pixabay などのサイトで、ロイヤリティフリーの高品質のビデオ映像を見つけることができます。

ウェブサイトに WordPress 動画の背景を追加する 3 つの方法

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

WordPress の背景動画をサイトに追加する最も簡単で迅速な方法は、それをサポートするテーマを使用することです。 WordPress のビデオ背景は、すでに多くのテーマのデフォルト機能です。

Woostify テーマを使用するか、市場でテーマを見つけることができます。 ウェブ上には、WordPress テーマや ThemeForest など、ビデオ背景をサポートする有料または無料の WordPress テーマを見つけることができる場所がたくさんあります。

テーマをインストールしたら、ドキュメント ページに移動するか、サポートに連絡して、WordPress の背景ビデオを追加する方法を確認してください。

ページビルダーを使用する

グーテンベルク

デフォルトの WordPress エディターおよびページ ビルダーである Gutenberg では、動画の背景を簡単に追加できます。

  1. + 」記号をクリックして、新しいブロックを追加します。 「カバー」を検索します。 次に、 Coverブロックをクリックして追加します。
wordpress-ビデオ-背景-1
  1. ビデオをアップロードするか、既にアップロードしている場合はメディア ライブラリから追加します。
wordpress-ビデオ-背景-2
  1. タイトルを書く…」テキストをクリックして、タイトルを追加します。
wordpress-ビデオ-背景-3
  1. ツールバーとサイドバーを使用して、Gutenberg ビデオの背景をカスタマイズします。 CSS クラスを追加して、さらにカスタマイズできます。
wordpress-ビデオ-背景-4
wordpress-ビデオ-背景-5
ワードプレス-ビデオ-背景-6

サイドバーのオプションの意味は次のとおりです。

  • オーバーレイ: ビデオに重ねて表示される色を設定します。
  • 背景の不透明度 : 透明度を調整します。 値が小さいほど透明になります。

ご覧のとおり、デフォルトのオプションはかなり制限されています。 しかし、最初からWordPressに統合されているため、最も簡単な方法でもあります. したがって、何もインストールする必要はありません。

Elementorページビルダー

WordPress で最も人気のあるページ ビルダーと見なされている Elementor を使用すると、YouTube ビデオと .mp4 ファイルを Web サイトの背景に追加できます。

Woostify のように、一部のテーマは Elementor をネイティブでサポートしています。 したがって、テーマも当てはまる場合、これが最適なオプションです。

エフェクトの追加、フォールバック画像の設定、開始時間と終了時間の選択などの高度なオプションもあります。

Elementor Web サイト ビルダー プラグインをダウンロードしてアクティブ化したら、以下のガイドに従って Elementor ビデオ背景を追加します。 あなたのサイトに。

  1. Elementor で新規または既存の投稿/ページを開きます。
  2. 「+」ボタンをクリックして、エディターからセクションを追加します。
wordpress-ビデオ-背景-7
  1. ご希望のセクション幅をお選びください。 今回は全角部分を選択します。
wordpress-ビデオ-背景-8
  1. 左パネルが表示されます。 [レイアウト] タブからセクションのルック アンド フィールを選択できます。 下の写真で「1」とマークされているコンテンツの幅を選択します。 箱入りを選択させていただきます。 全幅オプションを選択することもできます。
wordpress-ビデオ-背景-9
  1. 上の画像で「2」とマークされているスタイル タブをクリックして、ビデオを追加します。 背景セクションでは、無地、グラデーション、ビデオ背景の 3 つの背景スタイルから選択できます。 下の写真で「1」とマークされているビデオの背景オプションをクリックします。
wordpress-video-background-10
  1. 上の写真の「2」と「3」のボタンをクリックして、それぞれホバー効果とパーティクル効果を使用することもできます。
  2. 背景ビデオとして YouTube リンクを提供できます。 または、メディア ライブラリを使用して任意の .mp4 ビデオをアップロードできます。 次に、そのパーマリンクを入力します。
wordpress-video-background-11
  1. 開始時刻と終了時刻を指定し、上の写真でそれぞれ「2」と「3」とマークされている代替画像を提供できます。
  2. 身長に問題があるかもしれません。 その場合は、[レイアウト] タブから最小高さを調整します。
wordpress-video-background-12

それだ! この方法ははるかに複雑ですが、必要に応じて Elementor の背景ビデオを調整するためのはるかに多くの制御と高度な機能があります。

WordPress 動画背景プラグインを使用する

動画の背景をさらにカスタマイズするオプションが必要な場合は、この機能をサポートするサードパーティのプラグインを使用する必要があります。

最近では、バックグラウンドで YouTube、Vimeo、および MP4 ビデオを使用するオプションを提供する多くの無料および有料の WordPress プラグインから選択できます。 この記事では、いくつかの注目すべきもののみをリストします。

スマートスライダー 3

wordpress-video-background-13

最高の無料の WordPress ビデオ背景プラグインを探しているなら、Smart Slider 3 が最適です。

それを使用すると、ビデオブロックを作成できます。 次に、それらを個別のセクションまたは視差スクロール効果のあるヒーロー画像としてサイトに埋め込みます。

このプラグインは、YouTube と Vimeo の動画をサポートしています。 また、.mp4 ファイルをアップロードして使用することもできます。

Smart Slider 3 を使用すると、テキスト、ボタン、ロゴ、サムネイルなどを含む、好きなだけビデオ ブロックにレイヤーを追加することもできます。不透明度の調整、オーディオのミュート、ビデオのループなども可能です。

WordPress ビデオ背景を投稿/ページに追加するには、ショートコードまたは短い PHP スクリプトを WordPress サイトのテンプレート ファイルに直接挿入します。

ビデオ プレーヤーと全画面ビデオの背景

wordpress-video-background-14

これは、魅力的な全幅ビデオ背景を作成するための究極のツールです。 WordPress サイトの任意のページに、自己ホスト型、YouTube、または Vimeo の動画を追加できます。

プラグインをビデオ プレーヤーとして使用して、コンテンツをすべてのデバイス タイプに適合させることもできます。

画像と動画のフルスクリーン背景 WordPress プラグイン

wordpress-ビデオ-背景-15

このプラグインを使用すると、ビデオ背景、画像背景スライダー、マルチメディア ギャラリー、およびビデオ ギャラリーを WordPress サイトの全幅の背景に表示できます。

モバイル デバイスと互換性があり、動的テキスト、サークル タイマー、カスタマイズ可能なトランザクションなど、多くの注目すべき機能が含まれています。

最後の言葉

訪問者があなたのサイトに到着したとき、彼らの注意を引き、より長く滞在させるのに数秒しかありません. WordPress ビデオ背景 は、ブランド アイデアを増幅する最も効果的な方法の 1 つです。 この投稿で提供したヒントとガイドを使用することで、サイトの任意のページに WordPress ビデオ背景を簡単に追加できることを願っています.