WordPressは、さまざまな方法で動画をバックグラウンドに追加することができます。 Avada, Enfold など、いくつかのテーマでは、YouTube、非メオなどの映像を背景に追加することができる機能を提供します。 この記事では、 Enfold テーマに動画の背景を追加する方法を説明します。
Enfold テーマ動画背景を追加する方法
WordPressで動画バックグラウンドの使用
個人的には、複雑なサイトをあまり好きではない方だが、サイトのメインページにYouTubeやVimeoのビデオがバックグラウンドで再生されているサイトをまれです見ることができます。
WordPressは Slider Revolution（Slider Revolution） 同じスライダープラグインを使用したり、テーマで動画の背景オプションを提供する場合、テーマの機能を利用することができます。
Avada, Enfold などの人気のテーマでは、コンテナやセクションにYouTubeのなどの映像を追加することができます。
Diviテーマの場合見てみるとMP4ファイルを直接アップロードして背景に設定できるオプションが提供ね（参照）。 テーマでYouTubeの映像を背景に追加する機能を提供していない場合には、 mb.YTPlayer for background videosのような WordPress プラグインを使用することができます。
Enfold テーマで動画を背景に追加する
次のような方法で Enfold テーマで動画の背景を追加することができます。
まず、動画の背景を入れたいところコルロクセクション（Color Section）を追加します。 Avia Layout Builderを使用したページの編集画面で、 Layout Elements タブの カラーセクション 要素をドラッグして目的の場所に配置します。
Enfold テーマでColor Sectionは全幅（Full-width）要素として、常にページのコンテナの100％幅を占め、高さは異なる設定が可能です。 カラーセクション内のスライダー、テキストブロック、画像、動画などを追加することができます。
Color Sectionが追加されたらEdit Section（セクションの編集）アイコンをクリックします。
セクションの編集画面が表示されます。 レイアウト タブで セクションの高さ（Section Height）を指定します。
Section Heightセクションでのセクションの最小の高さを定義することができます。 直接の高さを指定したい場合 Custom height in pixel（ピクセル単位での高さのカスタマイズ）を選択します。
続いて スタイリング タブをクリックして、 背景ビデオ セクションをクリックします。
スタイリング タブで背景色、背景画像、背景動画を指定することができます。 背景ビデオ セクションにYouTubeの私の非メオ動画のURLを入力すると、そのカラーセクションに動画が背景に設定されます。 また、mp4、webm、ogvなどのWeb動画ファイルのリンクも入力が可能です。
YouTubeの私の非メオビデオを追加する場合は、次のような形式でURLを入力するようにします。
- http://vimeo.com/1084537
- http://www.youtube.com/watch?v=5guMumPFBag
フィールドに動画のURLを入力して、すぐ下の空のスペースをクリックすると、追加のオプションを指定することができる項目が表示されます。
ビデオのアスペクト比では動画アスペクト比、すなわちアスペクト比を指定することができます。 基本的には16：9が設定されています。
Hide video on Mobile Devices オプションを選択すると、モバイル機器で動画が表示されず、代わりにSection Background画像を表示します。
動画自動再生により、ユーザーのデータが意図せずに消費されるのを防ぐために、ほとんどのモバイル機器では、動画の自動再生機能がサポートされていません。
ほとんどのモバイル機器で動画の自動再生がされていないのは、機器自体の制限です。 たまに動画がスマートフォンで再同期再生されない方法をお探しの方を目撃します。 訪問者がサイトにアクセスしたとき、不要な動画再生のためのデータが50MBもしくは100MBが消費ば気持ちが良いのでしょう？ （最近は無制限料金制を多く使用して、以前より抵抗が少ないだろうが無制限プランを使用していないユーザーもいるので、ユーザーの経験上望ましくありません。）
背景動画を指定した場合保存して、カラーセクションに必要な要素（例えば、テキストブロック、ボタンなど）を追加することができます。
デモ
このプロセスを次の動画を使用して確認することができます。
コメントを残す