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

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

ウェブサイトを作っていて

  • 動画を入れたい
  • 動画の「ここからここまで」を入れたい

など思ったことはありませんか?

ただ動画を挿入するだけなら、やったことあるという人も多いと思います。
Elementorなら動画の「ここからここまで」と再生する時間を設定したり、オーバーレイを入れたりすることも可能。

今回はElementorの動画ウィジェットの使い方を解説していきます。

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

コンテンツタブ

動画ウィジェット挿入後の画面

いつものように動画ウィジェットをドラッグ&ドロップで挿入すると上の画像のように、まずコンテンツタブが表示されます。

コンテンツタブで設定できることを、上から順番に解説していきますね。

ソースの設定について

コンテンツタブのソースの説明

まずソースの設定です。丸で囲んだ『▼』を押すと

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

この4つを選択できます。上の3つはリンクしたいURLを貼るだけです。

独自アップロードをするときの注意点

ソースの独自アップロードの説明

NP4やMOVなどサポートされている動画であれば、独自の動画をアップロードすることも可能です。
四角の部分に入れたい動画をアップロードしましょう。

ただしPHPの設定で、アップロードできないこともあるので注意してください。
PHPの設定はGoogleで検索すれば、すぐにわかるかと思います。

また人によっては別のサーバーで動画を管理している場合もありますよね。
その時は外部URLのボタンをONにします。

動画のURLをリンク欄にコピー&ペースト

コンテンツタブのリンクの設定

ソースを選択したら、次は挿入したい動画のURLをリンク欄にコピー&ペーストして貼り付けします。
画像の四角で囲んだところですね。今回はYouTubeを選択してみました。
URLを貼り付ければ、冒頭の画像のように自動で指定の動画が表示されます。

動画の再生時間を指定する方法

再生時間の設定方法

四角で囲んだ欄で動画の開始時間と終了時間を指定できます。
以下の図のように数字を入れると、動画の5秒から10秒までが再生されるようになります。
簡単なのでぜひ好きな時間を設定してみてください。

開始時間と終了時間に数字を入れた画像

動画オプションを決める

動画オプションの説明

続いて動画オプションを決めていきましょう。
動画を自動で再生させたいとか、はじめはミュートにしておきたいなど自分の好みに合わせてON/OFFを切り替えます。

個人的にプレイヤーコントロールはあった方が便利だと思います。
なおスマホの場合ミュートにしないと自動再生されないので、この点は注意してください。

謙虚なプランディングという項目をONにすると、下の画像のように『YouTube』の文字が消せます。

謙虚なプランディングの説明

おすすめ動画を選択できる

おすすめ動画の選択

動画を停止させたときに、まるで囲んだおすすめ動画って出てきますよね。
四角で囲んだところで、特定のチャンネルにするかどうかを設定できます。

オススメがどの動画でもかまわない場合は、『Any Video』を選択しましょう。

画像オーバーレイで遅延読み込みを設定する

画像オーバーレイの説明

例えば1つのページで10個の動画を挿入すると、開いたときに10個の動画がロードされるので、読み込みがとても遅くなってしまいます。
そんな時は遅延読み込みをONにして、画像オーバーレイを設定しましょう。
遅延読み込みはボタンを押すまで動画がロードされない機能なので、大変便利です。

画像オーバーレイ横のボタンをONにすると、画像を選択する項目が出てきますので、ここに画像をアップロードします。

因みに遅延読み込みはピンク四角のすぐ下にありますので、ぜひ設定してください。
あとはサイズ指定や再生アイコンを表示させるかも設定できます。

LightboxをONにしてポップアップ表示させる

Lightboxの設定方法

画像オーバーレイの1番下の項目にLightboxがありますよね。
これをONにすると、上の画像のようにポップアップ表示させられるようになります。

スタイルタブ

スタイルタブの解説

スタイルタブでは縦横比やCSSフィルタ、再生アイコンなどを設定できます。
またスタイルタブにあった画像オーバーレイのLightboxをONにすると追加される項目もあるので、一緒に解説していきますね。

縦横比は動画に余白ができる

縦横比1:1の画像

縦横比は画像オーバーレイには影響しますが、動画に関しては影響しません
例えば縦横比を1:1にすると、表示画面が正方形になり動画部分の上下に余白が生まれます。

動画の大きさ事態は変わらないのです。

CSSフィルタ設定はしなくてもOK

CSSフィルタの設定画面

CSSフィルタの鉛筆マークを押すと、設定画面が開きます。
これは『Elementorの画像ウィジェットの使い方』の記事と同じです。

正直いつ使うのか謎な部分でもありますので、特に設定しなくても問題ありません

再生アイコンの色やサイズの設定方法

スタイルタブのアイコンの設定

再生アイコンの項目で、アイコンの色やサイズ、影の設定をしましょう。
今回はわかりやすく、大きめにしています。

上の画像のように各ボタンを右へスライドさせると、再生アイコンも変わっていますよね。

影をつけたい時は、影の項目横にある鉛筆マークをクリック。
すると設定画面が開きますのでそちらから設定してください。

動画を途中で止めたりすると再生アイコンが表示されていない場合があるので、その時はコンテンツタブに戻ります。
そして画像オーバーレイを1度OFFにしてからまたONにすると表示されますよ。

Lightboxの調整もできる

画像オーバーレイのLightboxをONにする

コンテンツタブの画像オーバーレイをONにすると、下の画像のようにスタイルタブの中にLightboxの設定項目が追加されます。

Lightboxのスタイル設定

Lightboxの項目は以下の設定ができます。
・背景色
・UI の色
・UI のホバー色
・コンテンツの幅
・コンテンツ配置
・開始アニメーション

UIというのは画像右上にある×のことを指しています。

また背景色を選ぶときに地球マークのglobalカラーを選択したとします。
するとあとからglobalカラーを変更したときに、ここの色も一緒に変わってしまうので注意してくださいね。

globalカラーについてはこちらの記事で詳しく説明していますので、確認してみましょう。

コンテンツの幅で表示サイズを選んだり、コンテンツ配置で好きな配置に設定したりします。
開始アニメーションも面白い設定ができますので、色々と試してみてください。

以上がElementorの動画ウィジェットの使い方です。

なお高度な設定についてはElementor-『高度な設定タブ』全部説明【初心者必見】の記事で紹介していますので、そちらを参考にしてみてください。


Mask機能でオシャレに動画を切り抜く方法

Elementorの『高度な設定』タブの中に比較的最近できた『Mask』機能というものがあります。

このMask機能は画像などを好きな形に切り抜く機能ですが、これがMask機能を使用すれば動画でさえも好きな形に切り抜くことができるんです!

詳しいやり方はこちら

>>【ElementorのMask(マスク)機能の使い方

をご覧ください!

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

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

Elementorの無料ウェブサイトテンプレート
新規追加されました。

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通