Diviでビデオを使用するための究極のガイド

公開: 2017-08-09

ビデオは強力なツールです。画像が1000語の価値がある場合、1分間のビデオは180万語の価値があります（少なくとも、研究者のJames McQuivey博士が示唆していることです）。ビデオは効果的なマーケティングツールであり、正しく実行されれば、美しいデザインの道具になります。

あなたのウェブサイトにビデオを追加することはDiviで簡単です。ビデオおよびビデオスライダーモジュールを使用すると、ビデオのURLを入力するだけで、youtubeやvimeoなどのサードパーティがホストするビデオを追加できます。ブラウザの互換性を最大化するために、mp4形式とwebm形式の両方で独自のカスタムビデオを追加することもできます。さらに、Diviには、サイトのデザインに合わせて画像オーバーレイと再生ボタンを使用して動画をスタイリングするオプションがあります。

Diviは、ページにビデオを埋め込むだけでなく、背景ビデオを追加するための簡単なソリューションも提供します。現在、Divi Builderを使用してサイトを構築すると、各セクション、行、列、および37個のモジュールのうち20個にバックグラウンドビデオ機能があります。

ほとんどの人にとって、Divi内でのビデオの使用は、必要なYouTubeまたはVimeoビデオへのリンクを挿入し、それが投稿またはページに表示されるのを確認するのと同じくらい簡単です。ただし、この投稿では、Diviがビデオで行うことをどのように、そしてなぜ行うのかについて説明します。これにより、実行したい特別なユースケース、独自のスタイル、または創造的な実験に完全に備えることができます。

このガイドでは、ここで説明します…

ビデオモジュールとビデオスライダーモジュールの舞台裏での動作により、より効果的に使用できます。
動画をセルフホスティングすることとサードパーティのホストを使用することの違い。
Web用にビデオを最適化するためのヒント。
ビデオ背景のベストプラクティス。
ビデオのサイズを選択するための一般的なガイド。
そして、バックグラウンドビデオのためのいくつかの役立つハック。

始めましょう。

ビデオモジュールの探索

ビデオモジュールを使用すると、ほぼすべてのソースからページにビデオを埋め込むことができます。ビデオモジュールに関するDiviのドキュメントでは、すべての機能と、ページにビデオを追加する方法について説明しています。しかし、この投稿では、もう少し深く掘り下げます。

ビデオモジュールへのセルフホストビデオの追加

ビデオモジュールを使用してセルフホストビデオを追加するには、ビデオをアップロードするか、ビデオ設定内のビデオファイルにURLを追加する必要があります。また、ビデオを2つのファイル形式で追加する必要があります。

ディビとのビデオ

そして、それはあなたが本当にする必要があるすべてです。十分に単純です。

ただし、舞台裏では、DiviはHTML5ビデオ要素を使用してビデオを表示しています。セルフホストビデオを追加するか、mp4およびwebm形式を使用して独自のビデオをアップロードすることを選択した場合、Diviが展開するコードの構造は次のようになります。

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
Error loading this resource
</video>

このコードが何をしているのかについて指摘したいことがいくつかあります。

<video>タグ内のcontrols属性に注意してください。これは、コントロールを表示するようにビデオに指示します。十分に単純です。
開始タグと終了タグ内の2つの<source>タグに注意してください。ソースはビデオファイルで構成されています。 1つ目はmp4で、2つ目はwebmファイル形式です。ブラウザを最大限にサポートするには、両方が必要です。順序も重要です。 mp4は最も広くサポートされているため、ブラウザに最初にmp4を表示する必要があります。これらの形式については、後で詳しく説明します。
最初の2つの形式が認識されない場合は、「このリソースの読み込み中にエラーが発生しました」という行が表示されます。
見えないのは、Diviがこの<video>タグのスタイルを設定し、応答性を高めるために100％の幅を指定して、ビデオがその列の幅に調整されるようにしていることです。

このHTML5ビデオ要素は、Web上でビデオを表示するための新しい標準的な方法として成長しています。ありがたいことに、Diviがこれを処理してくれます。

セルフホストビデオ画像オーバーレイ

ビデオをビデオモジュールに追加するオプションの他に、Diviではビデオのカスタムオーバーレイ画像を追加することもできます。

ディビとのビデオ

セルフホストビデオにオーバーレイ画像を追加する場合は、独自の画像をアップロードする必要があります。ビデオから画像を生成するオプションは、YoutubeやVimeoなどのサードパーティがホストするビデオURLにのみ適用されます。

画像はビデオのサイズになり、ビデオはそれが置かれている列のサイズに調整されるため、適切なサイズの画像を選択することが重要です。 Youtube、Vimeo、およびその他のほとんどの形式のビデオのアスペクト比は通常16：9です。したがって、最大コンテンツ幅をDiviのデフォルトの1080pxに設定している場合、16：9のアスペクト比に従うと、ビデオのサイズは1080×608になります。したがって、オーバーレイ画像は1080×608ピクセルである必要があります。

再生ボタン

画像が設定されると、Diviは自動的にカスタム再生ボタンを適用します。必要に応じて、[デザイン]タブの[ビデオ設定]でボタンの色を変更することもできます。

ディビとのビデオ

ユーザーがカスタム再生ボタンでオーバーレイをクリックすると、オーバーレイとボタンが消え、オーバーレイの下のビデオが自動的に再生を開始します。

サードパーティがホストするビデオURLの追加

ビデオモジュールにビデオを追加する最も一般的な方法は、YoutubeやVimeoなどのサードパーティによってホストされているビデオのURLを追加することです。したがって、セルフホストビデオの場合のように2つのビデオ形式を追加する代わりに、上部の背景入力バーにURLを追加するだけです。

ディビとのビデオ

舞台裏では、Diviは滑らかな幅のラッパーdivを追加し、ビデオを表示するiframeを埋め込みます。このiframeは、YouTubeから直接取得するものと同じです。ビデオモジュールを使用してYouTubeビデオを追加すると、コードがどのように表示されるかの例を次に示します。

<div class="fluid-width-video-wrapper" style="padding-top: 56.2963%;">
<iframe src="https://www.youtube.com/embed/Nimdf3Zeayk?autoplay=1&amp;amp;feature=oembed&amp;amp;wmode=opaque" frameborder="0" allowfullscreen="" id="fitvid0">
</iframe>
</div>

「fluid-width-video-wrapper」クラスのdivは、iframeをラップし、100％の幅を与えるため、コンテナーの幅に合わせて調整され、応答します。

オーバーレイ画像を追加する場合は、独自の画像をアップロードするか、少し頭痛の種を減らすために、[ビデオから生成]をクリックするだけで、Diviがビデオから取得したオーバーレイ画像を自動的に適用します。再生ボタンをカスタマイズすることもできます。

ビデオスライダーモジュールの探索

ビデオスライダーは、ビデオがスライダー内にあることを除いて、ビデオがWebページに展開される方法でビデオモジュールと非常によく似ています。これは、ビデオを1つの場所に表示するのに便利な方法であるため、ユーザーはビデオのグループを一度に1つずつスクロールするだけで済みます。ビデオスライダーモジュールオプションの詳細については、ドキュメントページをご覧ください。

ビデオスライダーの私のお気に入りの要素の1つは、スライドを制御するために使用できるサムネイルトラックです。便利で魅力的です。

ディビとのビデオ

サムネイルオーバーレイの色など、モジュール設定からスライダーコントロールの色をカスタマイズすることもできます。

ディビとのビデオ

サムネイル画像はアップロードした元の画像のサイズのままなので、スライダーに大きな画像を大量にアップロードしないように注意してください。アップロードするとサイトの速度が低下する可能性があります。また、サムネイルを動画から自動生成することはできません。それらを自分でアップロードする必要があります。

サムネイルは4：3のアスペクト比に従うため、16：9のスライダー画像を調整するために、画像の左右を爆破して切り取り、スペース全体をカバーします。

デザインのヒント：ファイルサイズを縮小し、サムネイルが画像の一部を切り取らないようにするための1つのトリックは、サムネイルを253×190ピクセル（アスペクト比4：3）にカスタマイズし、非表示にするオプションを選択することです。メインビデオに画像オーバーレイを表示します。そうすれば、オーバーレイ画像はサムネイルにのみ使用されるため、メインのビデオサイズに合わせて調整するためにこれ以上大きくする必要はありません。

動画をセルフホスティングするための4つの重要なヒント

CDNを使用します。 WordPress Media Libraryを介してビデオを追加することを検討している場合は、もう一度考えてみてください。独自のサーバー上の独自のWordPressインストールで動画をホストすることは可能ですが、帯域幅、ファイルサイズ、ストレージスペースなどに制限が発生する可能性があります。これにより、サイトの読み込み時間が遅くなり、動画ストリーミングが遅れる可能性があります。。 Amazons3などの外部サービスで動画をホストすることを検討します。これは、ページの読み込み時間に役立ちます。さらに、これらのプロバイダーの中には、人々があなたのビデオをダウンロードするのを防ぐ（または少なくともダウンロードをより困難にする）ためのセキュリティレベルを提供するものがあります。
Web用にファイルを最適化します。 特に大きなビデオ背景を使用している場合、ビデオは多くの帯域幅を消費します。ページが過負荷にならないように注意する必要があります。ビデオをWeb用に適切に最適化する場合は、考慮すべき要素がいくつかあります。考慮すべき有用な方程式は次のとおりです。
ファイルサイズ=ビットレート（キロビット/秒）x継続時間（秒単位のビデオの長さ）
したがって、ファイルサイズを小さくしたい場合は、長さ（ビデオの長さ）やビットレート（送信される1秒あたりのキロビット数）を減らす必要があります。ビットレートは常にユーザーの接続速度よりも低くする必要があります。世界のインターネット速度が約7Mbps（米国は約18 Mbps）であることを考えると、ストリーミングの中断を避けるために、ビットレートをそれよりかなり低く保つ必要があります。
これをすべて自分で行う必要はありません。 Handbrakeのようなビデオ圧縮に役立つ素晴らしい無料ツールがいくつかあります。
ウェブ用に動画を最適化する方法について詳しく知りたい場合は、「動画のサイズを小さくして読み込みを高速化する5つの方法」を読むことをお勧めします。いくつかの優れたリソースがリストされており、Handbrakeの使用方法に関する優れた説明があります。
正しいファイル形式を追加します。
前に述べたように、ビデオをセルフホスティングしている場合（Youtubeのようにサードパーティに依存せずにホストしている場合）、mp4形式とwebm形式の両方でビデオを追加する必要があります。
Mp4は、フラッシュを使用して古いブラウザの一部を再生し、モバイルブラウザサポートの標準であるため、現在最も広くサポートされている形式です。 Diviはコードの最初にmp4をリストしているので、iOSデバイスはファイルをすぐに認識できます。
Webmは2番目にサポートされている形式です。それはウェブ用に構築されたものであり、ここにとどまるようです。優れた圧縮率で高品質のストリーミングを生成します。そしてそれはオープンソースです。
これら2つを組み合わせると、モバイルを含むほとんどのWebブラウザーがサポートされます。
優れた無料の変換ツールは、VLCメディアプレーヤーです。
MIMEタイプの定義： WEBMビデオ形式がすべてのブラウザーで機能するためには、サーバーで正しいMIMEタイプが指定されている必要があります。 .htaccessを使用してMIMEタイプを定義する方法について詳しくは、こちらをご覧ください。ビデオが特定のブラウザで再生されていないことに気付いた場合は、これが理由である可能性があります..htaccessファイルにMIMEタイプを追加するには、FTPクライアント（FileZillaなど）を使用してWordPressルートファイルにアクセスします。そこに.htaccessファイルがあります。ファイルをテキストエディタで開きます。「#ENDWordPress」という行の下に、次を追加します。
AddTypeビデオ/mp4.mp4 .m4v
AddType video / ogg .ogv
AddTypeビデオ/webm.webm
次に、ファイルを保存します。これで、ビデオ形式がすべてのブラウザで認識されるようになります。

サードパーティプラットフォーム（YoutubeおよびVimeo）でのホスティング

自分のビデオの変換と圧縮が面倒な作業であることがわかった場合は、いつでもサードパーティに作業を任せることができます。

ビデオについて何も知らない場合は、このルートを取ることをお勧めします。 youtubeやvimeofreeの制限に夢中でなければ、VimeoProの弾丸を噛むことができます。長期的には頭痛の種になるかもしれません。あなたが望まないのは、あなたのサイトにそれを遅くしたり見栄えを悪くしたりするビデオを置くことです。それは単にそれだけの価値はありません。

ビデオおよびビデオスライダーモジュールでサポートされているサードパーティのビデオプラットフォーム

ビデオおよびビデオスライダーモジュールを使用してサードパーティのビデオを追加する場合は、次の一般的なプラットフォームを使用できます。

Youtube
Vimeo
Dailymotion

Diviを使用してサードパーティのビデオを追加する方法

これらのプラットフォームのいずれかからビデオを追加するには、共有リンクを取得するためにそれらのサイトにアクセスする必要があります。

ディビとのビデオ

次に、それをビデオまたはビデオスライダーモジュールに貼り付けることができます。

ディビとのビデオ

「ビデオから生成」ボタンをクリックして、imagオーバーレイを追加します。または、独自のアップロードを行ってください。

ディビとのビデオ

設定を保存する。以上です。

DiviはWordPress上に構築されているため、ビデオモジュールを使用せずに、推奨される埋め込みコードを使用してサードパーティのプラットフォームからいつでもビデオを埋め込むことができます。テキストモジュールを追加し、コンテンツボックス内に埋め込みコードを入力するだけです。

ディビとのビデオ

レスポンシブレイアウトに合わせて調整するには、埋め込みの幅と高さをカスタマイズする必要がある場合があります。

Wistiaはどうですか？

Wistiaは多くの人が使用する強力なプラットフォームですが、残念ながら現在Diviモジュールではうまく機能しません。ただし、提供されている埋め込みコードを使用してWistiaを埋め込むことができます。

ディビとのビデオ

そのコードをDiviサイトのコンテンツセクションに貼り付けると、ビデオが表示されます。

スライダーモジュールのコンテンツセクションにコードを貼り付けて、スライドの1つとしてwistiaビデオを追加することもできます。ただし、CSSを調整して、希望どおりの外観にする必要があります。

Diviでビデオ背景を使用する

ビデオの背景を使用する必要がありますか？

ビデオの背景の詳細に入る前に、ビデオの背景を使用する必要があるかどうかを正直に自問することが重要です。誤解しないでください、私は良いビデオの背景が大好きです。しかし、時にはそれが意味をなさないことがあります。それについて間違いを犯さないでください、ビデオはあなたのサイトを遅くし、あなたのコンテンツに気を散らす可能性があります。したがって、より効果的な画像よりもビデオの背景を選択しないでください。あなたのサイトはそれなしでより良いかもしれません。

ただし、画像よりもビデオの方が優れたソリューションである場合があります。正しく行われると、ビデオの背景がコンテンツに命を吹き込むことができます。だから、あなたのビデオを目的のあるものにして、それを重要視してください。

Divi内のビデオ背景機能

Divi Builderを使用して、ほぼどこにでもビデオの背景を追加できます。各セクション、行、および列にビデオの背景を追加できます。ほとんどのモジュールにビデオの背景を追加することもできます。
ビデオの背景をサポートするモジュールは次のとおりです。

全幅ヘッダー（フルスクリーンオプションでも機能します）
全幅メニュー
全幅ポートフォリオ
全幅ポストスライダー（注目の画像を使用しない場合は、ビデオの背景を使用してすべてのスライドの背景として使用できます）
全幅の投稿タイトル
全幅スライダー（個々のスライドで機能します）
オーディオモジュール
バーカウンター
宣伝文句–モジュールにパディングを付けるようにしてください。
召喚状モジュール
カウントダウンタイマー
メールオプチン
フィルタリング可能なポートフォリオ
ログインモジュール
ナンバーカウンターモジュール
個人モジュール
ポートフォリオ設定
ポストスライダー（注目の画像を使用しない場合は、ビデオの背景を使用してすべてのスライドの背景として使用できます）
記事のタイトル
価格表（モジュールおよびさまざまなテーブルのビデオ背景を個別に設定できます）
スライダー（個々のスライドの背景のみ）
タブ（モジュールの背景と個々のタブの両方）
お客様の声。
文章
トグル

ストックビデオライブラリ

サイトにビデオの背景を追加する際の難しい部分は、適切な画像を見つけて、それが適切なサイズであることを確認することです。ありがたいことに、独自のカスタムビデオ背景を作成する必要はありません。あなたのウェブサイトのためにうまくいくかもしれない利用可能なロイヤリティフリーのストックビデオライブラリがあります。無料のビデオ映像を探している場合は、videvo、coverer、またはvideezyから始めるのがよいでしょう。より質の高い有料バージョンをお探しの場合は、videohive、videoblocks、またはpond5をご覧ください。これらのサイトのいくつかは、インスピレーションを探している場合、ビデオの背景を非常にうまく使用しています。

ページにビデオの背景を追加する方法

適切なビデオを見つけた（または作成した）後、物事は本当に簡単になります。 Divi Webページにビデオの背景を追加するには、ビジュアルビルダーを展開し、ビデオを追加するセクションを見つけて、[セクション設定]アイコンをクリックします。

ディビとのビデオ

[コンテンツ]タブで、[背景]オプションの下にある背景画像のアイコン/タブをクリックします。セルフホストビデオをお持ちの場合は、mp4形式とwebm形式の両方を入力してください。次に、ビデオのサイズを入力して、Diviが適切なサイズを設定する方法を認識できるようにします。

ディビとのビデオ

次に、[背景画像]タブに移動し、モバイルデバイスの適切なフォールバックとして機能する背景画像を追加します。

次に、設定を保存します。とても簡単です。

現在youtube（またはvimeo）でホストしているビデオの1つを背景として使用することを計画している場合、これは現在Diviビルダー内では不可能です。すべてのブラウザに表示するには、これらのビデオを正しい形式で表示する必要があることに注意してください。ただし、そのYoutubeビデオをダウンロードして（自分のものである場合）、バックグラウンドで使用するためにmp4およびwebm形式に変換することができます。

背景デザインのヒント：全幅ポストスライダーにビデオ背景を使用する

ブログページで注目の投稿を紹介するクリエイティブな方法を探している場合は、投稿スライダーに動画の背景を追加できます。私が何を意味するのかをお見せしましょう。

Visual Builderを使用してページに移動し、全幅ポストスライダーモジュールを使用してページの上部に全幅セクションを追加します。

ディビとのビデオ

[コンテンツ]タブの[注目の画像を表示]で、[いいえ]を選択します。

ディビとのビデオ

次に、[背景]セクションで、[動画の背景]タブを選択し、サイズとともに両方の形式の動画を追加します。

ディビとのビデオ

ビデオの背景を表示できないモバイルデバイスのフォールバックとして、背景画像を追加することもお勧めします。

それでおしまい。

これで、ユーザーはクールな背景ビデオで注目の投稿スライダーをスクロールできます。ビデオの背景がコンテンツの邪魔にならないように十分に微妙であることを確認してください。

ビデオ背景のベストプラクティス

ビデオの背景によってもたらされるすべての可能性を踏まえて、私はいくつかの一般的なベストプラクティスを含めることが最善だと思いました。

モバイルのフォールバックとして、常に背景画像を含めます。モバイルデバイスは大きなビデオを自動再生しません。これが、Diviがモバイルデバイスでデフォルトでフォールバック画像を表示する理由です。
小さなビデオを使用してください。背景ビデオの場合、背景はビデオをオーバーレイするコンテンツ/テキストに対する2番目の考えであるため、720pの解像度で逃げることができます。品質はあなたが気付くほど悪くはありません。
オーバーレイについて考えてみましょう。ビデオの上に半透明のカラーオーバーレイを追加すると、ビデオの乱雑な詳細が低品質で非表示になるため、ファイルサイズを小さくするのに役立ちます。さらに、テキストがより目立つようになります。
音声は使用しないでください。ビデオの背景には音声は必要ないので、取り出してください。これにより、ファイルサイズが削減されます。
クロスブラウザのサポートには、mp4形式とwebm形式の両方を使用してください。

ビデオを一時停止しますか？

このオプションがバックグラウンドオプションの下の設定にリストされているのを見たことがあるかもしれません。

場合によっては、ビデオがサウンドを再生している別のビデオバックグラウンドと競合することがあります。このオプションは、一度に1つのビデオサウンドのみを再生し続けるのに役立ちます。

ディビビデオハック

役立つと思われる、より高度なビデオおよびビデオ背景のカスタマイズがいくつかあります。ここにいくつかあります。

再生ボタンのサイズを変更する

再生ボタンのサイズを変更する場合は、[詳細設定]タブの[ビデオモジュール設定]に移動し、[ビデオアイコン]というラベルの付いたボックスに次のカスタムCSSを入力します。

Font-size: 10rem;
Line-height: 10rem;
Margin-top: -5rem;
Margin-left: -5rem;

必要なサイズに値を調整できます。 font-sizeとline-heightが常に同じであり、margin-topとmargin-bottomが常にfont-sizeの半分の負の値のままであることを確認してください。たとえば、小さくしたい場合、値はになります。

Font-size: 4rem;
Line-height: 4rem;
Margin-top: -2rem;
Margin-left: -2rem;

クリックでビデオの背景が一時停止しないようにする方法

場合によっては、ビデオの背景をクリックするとビデオが一時停止することがあります。この機能を無効にするには、子テーマのstyle.cssファイルに次のカスタムCSSを追加します（またはテーマカスタマイザー>追加のCSS）。

.et_pb_section_video_bg video {
pointer-events: none;
}

ビデオの背景がループしないようにする方法

以前の投稿の1つからこのヒントを覚えているかもしれません。デフォルトでは、ビデオの背景はループし続けます。これは意図的なものです。これは通常、ビデオの背景に実行させたいことだからです。ただし、バックグラウンドビデオを一度表示してから終了する場合は、 [Divi]> [テーマオプション]> [統合]に移動し、次のように入力して、ループアクションを無効にすることができます。

<script>
(function($) {
    $(document).ready(function() {
        $('.no-loop .et_pb_section_video_bg').each(function() {
            $(this).find('video').removeAttr('loop');
        });
    });
})(jQuery);
</script>

Diviのビデオ寸法

私はビデオの寸法に言及せずに投稿を終了したくありませんでした。すべての動画とウェブサイトが異なることを考慮すると、どのディメンションを使用するかについての確固たるルールはありません。 720p（1280×720）のビデオは、1920×1080の画面で見栄えがよくなりますが、別のビデオはひどく見えます。サイトのビデオのサイズまたは解像度を決定するときは、一般的なガイドラインとして、Diviの列レイアウトとモジュールの画像のサイズに従うことができます。簡単に言えば、あなたのビデオは、下に行かずに、それが置かれている列の幅に最も近いはずです。したがって、最大幅が1080pxの全幅の列がある場合は、解像度が720p（1280×720）を超えるビデオは必要ありません。ただし、ブラウザの全幅にまたがるビデオ背景を使用している場合は、最大1080p（1920×1080）まで上げる必要がある場合があります。これにより、大きなモニターでブラウザの全幅にまたがる場合は、このようになりません。ざらざらしているように見えます。

あなたがウェブのためにあなたのビデオを準備するためにサードパーティのビデオ専門家に頼るつもりであるならば、ここにyoutubeのために推薦されたビデオ解像度のリストがあります。

2160p：3840×2160
1440p：2560×1440
1080p：1920×1080
720p：1280×720
480p：854×480
360p：640×360
240p：426×240

これらは16：9のアスペクト比に従うため、ビデオの側面に黒いバーは表示されません。

Vimeoはビデオのガイドラインも提供しています。私は特にビデオ圧縮の基本に関するVimeoの投稿が好きです。

最終的な考え

ビデオは、長い間、私たちのオンライン体験の不可欠な部分であり続けます。したがって、Webサイトにビデオを追加するときは、自分が何をしているのかを知っておくことが重要です。 Webサイトでビデオを使用することにした場合、Diviはプロセスを非常に簡単にし、セルフホストビデオ用のクロスブラウザーソリューションとサードパーティの埋め込み用の便利なソリューションを提供します。しかし、Diviはあなたのためにすべてを行うことはできません。この投稿が、適切なビデオを選択してWeb用に準備するプロセスに役立つことを願っています。

コメントでお返事をお待ちしております。