ウィジェットマニュアル「動画」
デバイスや通信インフラの進化に伴い、今では外出先などで気軽に動画を楽しめる時代になりました。同時に、動画は非常に多くのユーザーの関心を引く為の重要なコンテンツの１つなり、ホームページ上への設置機会は格段に増えています！そこで役にたつのが動画ウィジェットです。
ただ配置するだけなら、Elementorを使わなくとも配置出来ますが、Elementorの動画ウィジェットは動画の再生コントロールやおすすめ動画の表示など、細かい設定が可能となります。
是非、使い方をマスターしてホームページに動画コンテンツを設置してみてはいかがでしょうか？！
【コンテンツ】（無料版・PRO版共通）
コンテンツは大きくわけて「動画」と「画像オーバーレイ」に分かれます。
（コンテンツ）動画
①取得方法と②リンクについて
ここではどの動画を使うかを設定します。選択肢は「YouTube」「Vimemo」「Dailymotion」「独自アップロード」の４つから選べます。この４種の独自アップロード以外を選択すると、Elementorの素材が自動的に反映されます。
「YouTube」「Vimemo」「Dailymotion」を選択した場合
設定は簡単で、「リンク」の欄に動画のURLを貼り付けるだけです。※他の人の動画を貼り付ける場合は、著作権などに注意しましょう！
表示させたい動画をYoutubeなどで表示させます。そのページのURLをコピーし、ElementorリンクのURL欄に貼り付けるだけでOKです。
ちなみにお気づきかと思いますが、上の画像は当サイトのYouTubeチャンネルの動画です。詳しくはこちらから→（https://www.youtube.com/channel/UCeD2IsdtFTbPa_6jmE0M1oQ）
独自アップロードを選択した場合
独自のファイルを表示させる場合は、独自アップロードを選択します。選択すると「External URL」のON／OFFが表示されます。これをONにすると、ワードプレスにメディアとしてアップロードした動画のURLで設定する事が出来ます。
反対にOFFの場合は、画像ウィジェット同様にワードプレスのメディア一覧から動画ファイルを選択する事が出来ます。
上記の２通りの方法でご自身の動画ホームページに設置する事が可能です。
③開始時間と④終了時間
字のごとく、動画を何秒目から再生し、何秒目で終わらせるかを指定する事が出来ます。ちなみに下の画像を訳すと「180秒目から再生し、185秒目で終了」という設定になります。注意点としては単位は「秒」となります。
また、開始だけを設定した場合は、動画の最後まで再生されます。反対に終了だけを設定した場合、動画の最初から再生されます。両方空欄の場合は、その動画全部が再生されます。
（注意）①のどの動画を使うかによって設定可否が変わってきます。「Vimemo」と「Dailymotion」は開始時間のみ設定可能となり、終了時間は設定出来ません！
動画オプション
ここから先は、①のどの動画を使うかによって設定可能項目が変動します。Youtubuの場合をベースに解説していき、固有の設定項目が発生する場合、都度解説して参ります。
⑤自動再生（４種共通）
ここをオンにすると、動画を設置したページが開くと同時に自動的に再生されます。この機能をオンにする場合、音声も気にする事をおすすめします。いきなり開いて音が出るとユーザーはびっくりしますので、注意しましょう。
⑥ミュート（４種共通）
これをオンにすると、デフォルト設定は「消音」になります。ユーザーはどの様な環境で動画を閲覧するかわかりませんので、基本はオンにする事をおすすめします。
⑦ループ（Dailymotionのみ無し）
オンにした場合、動画が繰り返し再生されます。ただし、この場合③④の開始・終了時間の指定は無効になります。
⑧プレイヤーコントロール（各種設定あり）
読み込まれた際に再生ボタンや音声ボタンを表示させるか、させないかを設定出来ます。ちなみに、YouTubeなどの場合はオンにしても数秒経過するとコントロールバーは自動的に消えます。
独自アップロードした動画の場合は、こんな感じのコントールボタン
注意点としては、独自アップロードした場合のコントロールバーのデザインや機能は各種ブラウザに依存します。上記画像はChromeですが、Safariの場合は下の画像のデザインとなります。
YouTubeの場合
YouTubeの場合で、プレイヤーコントロールをオンにした場合、「謙虚なブランディング」という設定が表示されます。この設定をオンにすると、動画画面右下のYouTubeのロゴが非表示となります。
（設定オフの場合：YouTubeのロゴは表示されます）
（設定オンの場合：Youtubeのロゴは非表示となります）
Vimemoの場合
Vimemoを①で選択した場合は、「色の管理」「イントロのタイトル」「イントロのポートレイト」「イントロ署名欄」という設定項目が表示されます。
「色の管理」は、好きな色を設定する事で、タイトルやコントロールボタンなどの色を設定する事が可能です。
それ以外は動画左上のタイトルやアイコン、〜よりを表示させるか非表示にするかを選択する事が出来ます。
独自アップロードの場合
プレイヤーコントロールのオンオフに関わらず、「ダウンロードボタン」と「Poster」が設定出来ます。ダウンロードボタンをオンに設定する事で、右下のメニューアイコンをクリックした場合に「ダウンロード」を選択出来ます。
（注意）ブラウザによってはダウンロードメニューが表示されない場合があります。
次に「Poster」ですが、動画のあるページが読み込まれた際に、静止画を動画の表紙として表示させる事が出来ます。
設定方法は画像ウィジェットと同じで、メディア一覧からアップロード済みの画像を選択するだけです。
⑨プライバシーモード（YouTubeのみ）
編集画面の設定エリアに説明書きがあります。”プライバシーモードを有効化すると、YouTube は再生の有無にかかわらず、訪問者情報を保存しなくなります。”これは、YouTubeアナリティクスと呼ばれる動画視聴データを分析する機能で、閲覧ユーザーのデータを取得する機能がデフォルトで備え付けられています。例えば、YouTubeだけの視聴回数を厳密にカウントしたい場合は、ホームページ上での再生数をカウントしないように、この設定をオンにします。
⑩おすすめ動画（YouTubeのみ）
動画を最後まで閲覧し終わった後に、おすすめ動画として表示させる事が出来ます。このおすすめ動画をYouTube側に任せるか、独自に設定するかを選択出来ます。
「Current Video Channel」を選択した場合は、同じチャンネル内に公開されている動画を自動的に表示させます。反対に「Any Video」の場合は、ユーザーの動画閲覧履歴に基づく、YouTubeがおすすめする動画を自動的に表示されます。
（コンテンツ）画像オーバーレイ
①画像オーバーレイ
前項の⑨の独自アップロード時に付属する機能「Poster」とほぼ同じ機能で、この機能をオン（表示）にすると、動画の表紙の様な画像を設定する事が出来ます。
②画像の選択
画像ウィジェットの様に、メディア一覧より設定したい画像を選択するだけです。背景透過画像を選択してしまったので、動画画面が見えてますが・・・（汗）背景ある場合は、表紙としての画像が表示されます。
③Lazy Load（画像読込遅延機能）
全てのデータを読み込んでから表示させると、ユーザーを待たせる事となり、待てないで離脱するリスクがあるため、比較的軽いテキストを先に読み込ませ、時間のかかる画像や動画は画面表示に合わせ読込にいく機能です。
④画像サイズ
画像ウィジェットにも登場した画像サイズですが、そのまま説明を引用します。
「見た目のサイズというよりは、画像ファイル自体のサイズを意味します。例えば本当は幅100pxで表示させれば良い部分に、幅1000pxの画像を入れ（後ほどご紹介するスタイル）縮小すると、ブラウザ読み込み時に幅1000pxの画像として読み込み、重くなる要因になります。それを防ぐ為、ここで画像サイズを設定する事で、無駄な読み込みを軽減してくれます。カスタムを選択した場合、幅と縦をそれぞれ数値設定出来ます。」
詳しくは画像ウィジェットの記事をご覧下さい。
⑤再生アイコン
静止画を表示とした場合、動画ですよ〜とわかりやすくするため、中央に再生アイコンを表示する事が出来ます。真ん中の再生ボタンが表示されます。
真ん中の再生ボタンが表示されます。
⑥Light Box
静止画をクリックした場合、動画だけろ表示し、背景は目立たなくさせる機能です。実査にご覧下さい。
表紙に設定した画像をクリックすると、動画が開き背景は暗くなし、動画だけが最前面に表示されます。例えば、「動画はこちら」という画像を設定し、クリックすると動画画面が大きく表示させるという事が出来ます。
【スタイル】（無料版・Pro版共通）
スタイルは「動画」と「Light Box」に大きく分かれます。
①縦横比
選択式になっており、「1:1」「3:2」「4:3」「16:9」「21:9」から選択出来ます。画像だと分かりづらいかもしれませんが、一応サンプル画像を置いておいきます。
②CSSフィルタ
要所要所で登場するCSSフィルタですが、動画ウィジェットでは動画に対しても有効です。色やぼかし、コントラストや彩度など色々調整する事が出来ます。詳しい使い方は割愛させて頂きますが、是非触ってみて下さい。
彩度をゼロにして白黒にしてみました。もちろん白黒で再生されます。
【詳細】（無料版・PRO版共通項目）
※詳細は一部PRO版のみの機能があります。
①詳細
マージン・パディング・Z-index・CSS ID・CSS クラスが設定出来ます。（CSS関連はここでは割愛させて頂きます）
＜そもそもマージンとパディングって何？＞
例えば、写真や文章（ウィジェット）に対し、赤い線画＝枠線を境とした外側の余白と内側の余白をそれぞれマージンとパディングと言います。
例えばマージンを上下左右に100px余白を設定しみると・・・
緑の部分（＝つまりはウィジェットの外側）が100px余白が出来ました。次にパディングを上下左右100px世世余白を設定してみると・・・
今度は黒の部分（＝つまりはウィジェット内側）が100px余白が出来ます。マージンとパディングはデザインに大きく影響しますので、慣れておく事をおすすめします。また、このマージンとパディングはスマートフォンデザイン、タブレットデザインと個々に設定が可能です。
＜Z-Indexの解説＞
ウィジェットなどの表示の優先順位を設定する項目です。
例えば、上の図の様に、Z-indexが１と２に設定された２つのウィジェットがあるとします。これをマージンなどで調整して重ねた場合どの様になるかみてみましょう。
Z-indexが大きい２のウィジェットが上に表示されました。０が一番下になり、設定数字の大きい順に手前に表示されます。ちなみに初期値は空欄となっており、この場合、下にあるウィジェットが上になるようです。サイト制作の上でレイヤー感は見栄えが良くなると思いますので、マージンやパディングと合わせて慣れておくと良いかもしれません！
②詳細＞Motion Effect（一部PRO版のみあり）
ウィジェット（テキストや画像）が表示される際にアニメーション（動き）を付ける事が出来ます。また、PRO版ではスクロールに合わせて動きをつけられる「Scrolling Effects」とポインタ（マウス）の動きに合わせて動きをつけられる「Mouse Effects」が設定出来ます。
下記はアニメーションを選択すると表示される項目です。
・アニメーションの継続時間：動きの時間を「遅い」「普通」「速い」の３段階で設定出来ます。
・アニメーションの遅延 (ms)：動きの開始時間を遅らせる事が出来ます。単位がms＝1000分の1秒で設定出来ます。ちなみに1000msは1秒なので、60000msは1分となります。さすがに1分はスルーされますね・・・（汗）
③背景
＜普通・ホバー＞
「普通」は画面に表示する際の背景に対し、「ホバー」はカーソルがそのウィジェット範囲に入った時（カーソルがのっている状態）の背景となり、それぞれ背景を設定する事が出来ます。例えば、ボタンなどで良く見かけるのですが、マウスをボタンに乗せると色が変わったりするやつを想像して下さい。
＜クラシック＞
単色カラーの背景、または画像を設定出来ます。
・色：カラーパレットまたはHTMLカラーコードなどを使用して色を設定出来ます。また、透明度もスライダーで調節する事が出来ます。
・画像：画像を背景に指定する事が出来ます。ただし、画像を設定した場合は、色の設定は無効となります。
・位置：（画像を選択すると設定出来る項目）どこを起点に背景を設置するかを指定出来ます。
・添付：「デフォルト」「スクロール」「固定」の３種から選べます。
※スクロール（視差効果）はそのままでは機能しないみたいです。
※固定はデスクトップ上でのみ動作します。
・繰り返し：背景画像を連続して表示するか、しないかを選択出来ます。
・サイズ：背景画像の全体が見える様に縮小して配置するか、拡大して背景対象範囲をカバーするかなど設定出来ます。
＜グラデーション＞
２色を使ったグラデーション背景を設定出来ます。
・色：１色目の色を設定出来ます。
・場所：１色目の範囲割合を設定します。
・２つ目の色：２色目の色を設定出来ます。
・場所：２色目の範囲割合を設定します。
・タイプ：「線状」と「放射状」を選択出来ます。
（線状の場合）境界線の角度が設定出来ます。
（放射状の場合）放射の中心点の位置を選択する事が出来ます。
④ボーダー
ウィジェットエリアに枠線を付ける事が出来ます。
＜普通・ホバー＞
カーソルがウィジェット範囲に入ると枠線のデザインを変える事が出来る「ホバー」（普通）通常表示時の枠線設定に対し、（ホバー）カーソルがウィジェット範囲に入った場合、枠線のデザインが変わります。
＜ボーダータイプ＞
枠線のタイプを選べます。二重線や破線などがあります。
※以下は、ボーダータイプを選択した時のみ項目が表示されます。
・幅：枠線の太さを上下左右の枠線ごとに設定する事が出来ます。
・色：枠線の色を設定出来ます。
・ボーダーの丸み：枠の角を上下左右ごとに丸くする事が出来ます。
＜ボックスシャドー＞
ウィジェット領域に対し、影を付ける事が出来ます。注意：テキストだけに影をつけたい場合は、スタイルのテキストシャドウで設定します。この場合は、ウィジェット範囲全体に影がつきます。
⑤Custom positioning（カスタムポジショニング）
神機能として本ブログでも紹介しておりますので、下記の記事も是非ご覧下さい。
一言で言えば・・・好きなアイテム（ウィジェット）を好きな場所に設置できる機能です。ビルダー系のプラグインや、WordPress以外の簡単ホームページ作成ツールでも見かけない機能です。この機能だけでもElementorを選ぶ価値はあります！
⑥レスポンシブ
ウィジェットを閲覧デバイス（デスクトップ、タブレット、モバイル）ごとに表示するか非表示にするかを設定出来ます。注意：編集モードの際には適用されません。確認する際はプレビューモードなどで確認しましょう。
ちなみに、上の設定の場合、モバイルでの閲覧時にのみ、このウィジェットが表示され、デスクトップやタブレットで見た場合は表示されません。
⑦カスタムCSS ※PRO版のみ
CSSコードを追加する事が出来ます。その際、詳細の５と６を使うと安易に適応範囲の指定が出来ます。
まとめ
ホームページ制作を請け負っていると、最近動画を掲載したいとご要望が増えてきました。また、中小企業でもYouTubeに動画を公開したりしてますので、この動画ウィジェットの利用頻度は上がるかと思います。
YouTubeのまとめサイトや、ビデオブログなどのコンテンツ制作にも役立つかと思いますので、是非マスターしてみて下さい！
