Elementorの動画ウィジェットの使い方

執筆者 | 更新日 2020年02月10日 | Elementorの使い方 | 2 コメント

Elementorの動画ウィジェットでできること

  • YouTube
  • Vimeo
  • Dailymotion
  • 独自アップロード

動画ウィジェットでは、上記の4つのプラットフォームを利用して、動画を表示させることができます。ただ動画を表示するだけでなく、動画にオーバーレイ画像を追加したり、外見を魅力的にすることができます。

【限定】Elementorの使い方を動画で網羅的に学びませんか?こちらから無料でコースを受講できます。

コンテンツの動画の設定

「取得」でプラットフォームを選択する

  • 取得方法
  • 開始時間
  • 終了時間

「取得方法」では、動画のプラットフォームを選択します。「YouTube」と「Vimeo」、「Dailymotion」、「独自アップロード」の4つの選択肢があります。「YouTube」と「Vimeo」、「Dailymotion」の3つは、リンクを挿入すればOKです。これらは、動画の「開始時間」を設定できます。例えば、「5」と入力すると、動画が5秒進んだ位置から再生されることになります。また、「YouTube」に関しては、「終了時間」も決めることができます。

YouTubeの動画オプション

YouTubeの動画オプション

  • 自動再生
  • ミュート
  • ループ
  • プレイヤーコントロール
  • プライバシーモード
  • おすすめ動画

「動画オプション」項目では、上記の設定が行えます。「自動再生」は、訪問者が記事にランディングしたら、自動で動画が再生されます。「ミュート」は、動画の音をあらかじめ消しておく設定です。「ループ」は、動画を繰り返し再生できる設定になります。「プライバシーコントロール」をオンにすると、訪問者は動画の早送り等ができなくなります。「プライバシーモード」に関しては、オンにすると、YouTubeは訪問者情報を保存しなくなります。視聴履歴に影響してくるので、関連動画の表示に影響してきます。最後の「おすすめ動画」に関しては、「Current Video Channel」、「Any Video」という2つの選択肢があります。前者は、表示している動画をアップしているチャンネルから関連動画を表示してくれ、後者はチャンネルに関係なく関連する動画を表示するという設定になります。

Vimeoの動画オプション

Vimeoの動画オプション

  • 自動再生
  • ミュート
  • ループ
  • 色の管理
  • イントロのタイトル
  • イントロのポートレイト
  • イントロ署名欄

「自動再生」と「ミュート」、「ループ」は、YouTubeのものと同じです。 「色の管理」では、動画のタイトルとチャンネル名の色を変更することができます。「イントロのタイトル」と「イントロのポートレート」、「イントロ署名」をオフにすると、それぞれ動画のタイトル、チャンネルのアイコン、チャンネル名を非表示にすることができます。

Dailymotionの動画オプション

Dailymotionの動画オプション

  • 自動再生
  • ミュート
  • プレイヤーコントロール
  • 動画情報
  • ロゴ
  • 色の管理

Dailymotionの動画オプションにある「自動再生」と「ミュート」、「プレイヤーコントロール」は、YouTubeのものと同じです。「動画情報」をオフにすると、動画のタイトルとチャンネル名を非表示にすることができます。「ロゴ」をオフにすると、Dailymotionの「d」のロゴを非表示にすることができます。僕は、非表示をお勧めします。最後の「色の管理」では、プレイヤーコントロールの色を変更することができます。

独自アップロードの動画オプション

独自アップロード動画設定

「External URL」を「いいえ」にすると、「Choose File」という項目が表示されます。ここのプラスボタンをクリックして、WordPressにアップロードした動画を選択します。

独自アップロードのExternal URL

「External URL」を「はい」にすると、「Enter your URL」という欄が表示されます。ここには、外部リンクを入力します。

独自アップロードの動画オプション

  • 自動再生
  • ミュート
  • ループ
  • プレイヤーコントロール
  • ダウンロードボタン
  • Poster

「自動再生」と「ミュート」、「ループ」、「プレイヤーコントロール」に関しては、もう大丈夫だと思います。「ダウンロードボタン」というのは、動画をダウンロードするためのボタンです。これをオンにしておくと、訪問者は動画をダウンロードできるようになります。無料で配布したい動画ならオンにしておいても良いかもしれません。「Poster」は、YouTubeでいうサムネイルみたいなものです。何も設定していないと、動画の最初のシーンが表示されてしまいますが、見映えを良くしたい場合は、ここにサムネイルを追加しておくことをお勧めします。

コンテンツの画像オーバーレイの設定

ビデオウィジェットの画像オーバーレイ

  • 画像オーバーレイ
  • 画像の選択
  • Lazy Load
  • 画像サイズ
  • 再生アイコン
  • Lightbox

画像オーバーレイでは、「画像オーバーレイ」サムネイルを追加することができます。「独自アップロードの動画オプション」では、「Poster」でサムネイルを追加できます。「画像サイズ」でサムネイルの大きさを変更することができたり、「再生アイコン」の表示・非表示も設定できます。「Lazy Load」を「はい」に切り替えると、動画は再生ボタンをクリックするまで動画をロードしないという設定になります。なので、ページ表示スピードの短縮が見込めます。

「Lightbox」をオンにすると、ポップアップのような感じで動画を再生することができます。

スタイルの動画設定

ビデオウィジェットのスタイル設定

  • 縦横比
  • CSS フィルタ
  • サイズ

「スタイル」では、外観の設定ができます。「縦横比」では、動画の縦と横の比を「1:1」、「3:2」、「4:3」、「16:9」、「21:9」、「9:16」の6タイプから選択できます。「CSSフィルタ」では、「ぼかし」、「明るさ」、「コントラスト」、「彩度」、「Hue」の設定ができます。「色」と「サイズ」、「影」に関しては、「画像オーバーレイ」を「はい」に設定している場合にのみ表示され、再生アイコンの外観の変更が可能です。

スタイルのLightbox設定

  • 背景色
  • UIの色
  • UIのホバー色
  • コンテンツの幅
  • コンテンツ位置
  • 開始アニメーション

「背景色」は、ポップアップ表示されている時の、動画の背景の色のことです。「UIの色」と「UIのホバー色」は、ポップアップを比表示するためのバツボタンの色になります。「UIの色」の方は通常時の色で、「UIのホバー色」はマウスカーソルを置いた時の色です。

「コンテンツ幅」は動画のサイズを調節することができます。「コンテンツ位置」では、動画の位置を「中央」、「上」から選択可能です。最後の「開始アニメーション」に関しては、ポップアップ動画を表示する時のアニメーションです。ドロップダウンメニューから好きなアニメーションを選択しましょう。

根本 耕輔

根本 耕輔

WordPressを使ったオンラインビジネスの構築が得意。

KClubマーケティング、KClubショーケースを運営。

Elementorの使い方を学びませんか?

Elementorの各ウィジェットの使い方からページの作り方まで網羅的にカバーしたコースが無料で受講できます。(通常¥980)

2 コメント

  1. ののやま

    素晴らしい記事をありがとうございます!
    気になったのですが、動画を横に3つ並べて各動画の下に動画のタイトルをテキストで表示させたいのですが、どうすればいいのでしょうか?
    スマホ表示のときは動画が縦1列になってそこにタイトルがしっかり付いてきてほしいです。

    返信する
    • 根本耕輔

      コメントありがとうございます!そう言っていただけて嬉しいです。動画とタイトルの件についてですが、インナーセクションを追加して、3カラム(列の上で右クリックして、複製)にし、その中に動画とテキストウィジェットを追加してみてはいかがでしょうか?

      返信する

コメントを提出

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Elementorの使い方を"無料"で学びませんか?

プロのようなランディングページが作れるElementorの使い方が無料で受講できます。

Elementorの使い方

無料でElementorの使い方を網羅的に学びませんか?
 

基本的なウィジェットの使い方から、ページを作成する方法までカバーしています。デザイン性の高いランディングページの作成を考えている方にオススメです。 下のボタンから無料で受講できます。

かっこいいLP作りたくないですか?