に関する記事です。ウィジェット

動画の埋め込み方法！

動画の埋め込み方法！YouTubeやvimeoなどなんでも埋め込み可能！

動画の需要が増えておりますが、コネクティッドワンでは、埋め込み形式でどんな場所にでも動画を表示させることが可能です。また、YouTubeのライブ配信動画も埋め込み可能です！

YouTube、Vimeoを含む多くの動画サイトの動画を、外部サイトから読み込んで表示できます。
YouTubeとVimeoの場合、動画のURLを貼り付けるだけで埋め込みが可能です。
その他の動画サイトでは、各サイトが発行する埋め込みコードを利用します。

コネクティッドワンの編集画面で、動画を埋め込みたい場所に「ウィジェットを追加」します。
ウィジェットの一覧から「映像」を選びます。

選択した「映像」パーツを、ウェブページ内の好きな位置にドラッグ＆ドロップで配置します。

配置した「映像」ウィジェットの設定画面を開きます。

YouTubeまたはVimeoの場合

各動画サイトで、共有オプションを開きます。
【YouTube】動画下の「共有」ボタンからリンク（URL）をコピーします。

【Vimeo】同様に、共有オプションからリンク（URL）をコピーします。

コネクティッドワンの「映像」ウィジェットのURL入力欄に、コピーしたURLを貼り付けます。

その他の動画サイトの場合

各サイトで提供されている埋め込みコードを取得します（通常、共有オプションの中に「埋め込み」という項目があります）。

埋め込みコード（HTML形式の長い文字列）をコピーします。
コネクティッドワンの「映像」ウィジェットの埋め込みコード入力欄に貼り付けます。

動画のサムネイルを変更したい場合は、「映像」ウィジェットの編集画面を開きます。
「カスタムサムネイルを使用」という項目を選択します。

任意の画像ファイルを事前にアップロードし、独自のサムネイルを設定します。

サムネイルを設定すると、通常、中央に再生ボタンが表示されます。

YouTubeなどの場合、デフォルトのタイトル表示を隠すためにもサムネイルを活用できます。

「映像」ウィジェットの編集画面で、影などのデザイン効果を追加できます。

例えば、外側に影をつけると、動画をより目立たせることができます。
影の位置や大きさも調整可能です。

編集画面で「映像」ウィジェットを選択すると、上下左右に矢印が表示されます。
矢印をドラッグして、動画の幅や高さを直感的に調整できます。
また、ウィジェット右下の黒い部分（サンプル画像では白で表示）をドラッグすると、縦横比を保ったままサイズを変更できます。

「映像」ウィジェットの編集画面で、三本線アイコン（アライメント調整）をクリックします。

左揃え、中央揃え、右揃えなどから選び、動画の配置を整えます。
カラムの中央に動画を配置することも可能です。

すべての設定が完了したら、「保存」ボタンをクリックします。
プレビューまたは公開サイトで、埋め込んだ動画が正しく表示され、中央の再生ボタンをクリックして動画が再生されるかを確認します。

更新日 12/04/2025

この記事は役に立ちましたか？

ありがとうございます