WordPress Enfold テーマ動画背景を追加する方法

  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

ワードプレスでは、さまざまな方法で動画をバックグラウンドに追加することができます。 ああ海、円フォールドなど一部のテーマでは、YouTube、非メオなどの映像を背景に追加することができる機能を提供します。 この記事では、円のひだのテーマに動画の背景を追加する方法を説明します。

円フォールドテーマ動画背景を追加する方法

ワードプレスで動画バックグラウンドの使用

個人的には、複雑なサイトをあまり好きではない方だが、サイトのメインページにYouTubeやVimeoのビデオがバックグラウンドで再生されているサイトをまれです見ることができます。

ワードプレスでは、 レボリューションスライダー(Slider Revolution) 同じスライダープラグインを使用したり、テーマで動画の背景オプションを提供する場合、テーマの機能を利用することができます。

ああ、海, 円フォールド などの人気のテーマでは、コンテナやセクションにYouTubeのなどの映像を追加することができます。

ワードプレスああ海のテーマ動画背景バックグラウンド
ああ、海のテーマでは、コンテナにYouTubeの/非メオビデオを背景に設定することができる。

Diviテーマの場合見てみるとMP4ファイルを直接アップロードして背景に設定できるオプションが提供ね(参考)。 テーマでYouTubeの映像を背景に追加する機能を提供していない場合には、 mb.YTPlayer for background videosのようなワードプレスのプラグインを使用することができます。

円フォールドテーマで動画を背景に追加する

次のような方法で 円フォールドテーマで動画の背景を追加することができます。

まず、動画の背景を入れたいところコルロクセクション(Color Section)を追加します。 Avia Layout Builderを使用したページの編集画面で、 Layout Elements タブの Color Section 要素をドラッグして目的の場所に配置します。

円フォールドテーマ動画の背景を追加

円フォールドテーマでColor Sectionは全幅(Full-width)要素として、常にページのコンテナの100%幅を占め、高さは異なる設定が可能です。 カラーセクション内のスライダー、テキストブロック、画像、動画などを追加することができます。

Color Sectionが追加されたらEdit Section(セクションの編集)アイコンをクリックします。

ワードプレスの円フォールドのテーマ - カラーセクションの編集

セクションの編集画面が表示されます。 レイアウト タブで セクションの高さ(Section Height)を指定します。

Enfold テーマ - カラーセクションの高さを指定

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を入力して、すぐ下の空のスペースをクリックすると、追加のオプションを指定することができる項目が表示されます。

動画の背景をモバイル機器で無効にする

Video Aspect Ratioでは動画アスペクト比、すなわちアスペクト比を指定することができます。 基本的には16:9が設定されています。

Hide video on Mobile Devices オプションを選択すると、モバイル機器で動画が表示されず、代わりにSection Background画像を表示します。

動画自動再生により、ユーザーのデータが意図せずに消費されるのを防ぐために、ほとんどのモバイル機器では、動画の自動再生機能がサポートされていません。

ほとんどのモバイル機器で動画の自動再生がされていないのは、機器自体の制限です。 たまに動画がスマートフォンで再同期再生されない方法をお探しの方を目撃します。 訪問者がサイトにアクセスしたとき、不要な動画再生のためのデータが50MBもしくは100MBが消費ば気持ちが良いのでしょう? (最近は無制限料金制を多く使用して、以前より抵抗が少ないだろうが無制限プランを使用していないユーザーもいるので、ユーザーの経験上望ましくありません。)

背景動画を指定した場合保存して、カラーセクションに必要な要素(例えば、テキストブロック、ボタンなど)を追加することができます。

デモ

このプロセスを次の動画を使用して確認することができます。

注:



コメントを残す