ホーム » 動画ウィジェットの使い方

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

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

ページ内でYouTube動画を見られるようにしましょう。

このページでできること
動画URLの設定・再生オプション・表示確認

画面の番号と説明を見比べて進めてください。写真はOptiBの実際の編集画面です。ご自身のページとは文章や画像が異なります。

① 部品・画面を開く② 内容を設定③ 見た目を確認④ 保存

① 「動画」を選ぶ

  1. 編集したいページを「Elementorで編集」で開きます。
  2. すでに配置済みなら、右側のページで変更したい部品をクリックします。
  3. 新しく追加する場合は、左上の「+」を押し、検索欄に「動画」と入力します。
  4. 見つかった部品を、右側の入れたい場所までドラッグします。マウスを押したまま移動し、置きたい場所で離します。
似た名前が複数ある場合、このページでは基本の「動画」を使います。Atomic版や追加プラグインの同名部品とは設定が異なります。

開き方から確認したい場合:ページを作成・編集する

② 動画のURLを貼り付ける

① ソース → ② リンク → ③ 自動再生(実際のElementor画面)123
① ソース → ② リンク → ③ 自動再生。画像を押すと拡大できます。
  1. 「ソース」で、動画を置いているサービスを選びます。YouTubeなら「YouTube」です。
  2. YouTubeで紹介したい動画を開き、「共有」からURLをコピーします。
  3. 「リンク」のサンプルURLを消し、コピーしたURLを貼り付けます。
  4. 「開始時間」「終了時間」は、動画全体を見せる場合は空欄のままにします。
  5. 「自動再生」は最初は「いいえ」、「プレイヤーコントロール」は「表示」にすると、見る人が自分で再生しやすくなります。
画面のURLはElementorの初期サンプルです。必ずご自身が掲載したい動画のURLに置き換えます。URLが長くて欄から見切れていても、入力内容が省略されたとは限りません。
成功の目印:右側が指定した動画のサムネイルやプレイヤーに変わります。

③ 再生のしかたを確認する

  1. 必要があれば開始時間を秒数で指定します。例:30なら30秒の位置から始まります。
  2. 「ミュート」は音を出さない設定、「ループ」は繰り返し再生する設定です。通常の説明動画なら、最初はオフのままで構いません。
  3. 「スタイル」で縦横比を確認します。横長動画なら16:9がよく使われます。
  4. プレビューで再生ボタンを押し、映像と音声を確認します。
おすすめの練習設定

ソース:YouTube
リンク:ご自身の紹介動画のURL
開始・終了時間:空欄
自動再生:いいえ
プレイヤーコントロール:表示

自動再生はブラウザや端末によって制限されます。「はい」にしても必ず再生されるわけではありません。
スマホ表示の切り替え位置(見出しの画面を使った共通例)(実際のElementor画面)1
スマホ表示の切り替え位置(見出しの画面を使った共通例)。画像を押すと拡大できます。

④ スマホで確認して保存する

上部のスマートフォン形のアイコンを押し、表示を確認します。問題がなければ右上の「公開」または「更新」を押し、保存後に実際のページを開き直します。

  • 目的の動画が再生される。
  • スマホでもプレイヤーが画面内に収まる。
  • 音声の有無や再生ボタンが意図した状態になっている。

スマホ表示の詳しい調整方法下書き保存・公開・元に戻す手順

うまくいかないとき

困ったこと 確認するところ
動画が表示されない URLの貼り間違い、動画の公開範囲、外部サイトへの埋め込み制限を確認します。
パソコンの動画を使いたい ソースの「セルフホスト」を選ぶ方法があります。大きな動画は読み込みが重くなるため、容量と再生環境を確認してください。

画面の表示はバージョンや設定によって異なる場合があります。


← Elementor使い方マニュアルの目次へ