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

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

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

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

コンテンツの動画の設定

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

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

YouTubeの動画オプション

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

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

Vimeoの動画オプション

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

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

Dailymotionの動画オプション

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

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

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

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

「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のホバー色」はマウスカーソルを置いた時の色です。

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