> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://con-one.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 動画の埋め込み方法！（外部サイトの動画埋め込み）

${youtube}[動画の埋め込み方法！YouTubeやvimeoなどなんでも埋め込み可能！〜コネクティッドワンの使い方〜](0Nv4AOvCkYA)

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

動画の需要が増えておりますが、コネクティッドワンでは、埋め込み形式でどんな場所にでも動画を表示させることが可能です。また、YouTubeのライブ配信動画も埋め込み可能です！
※解説動画には旧操作画面が含まれます。Vimeoの動画を埋め込む際は、共有リンク（URL）ではなく、埋め込みコードをご利用ください。


### 動画を外部サイトから埋め込む方法

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


### 埋め込み手順

#### 1. ウィジェットの追加

* コネクティッドワンの編集画面で、動画を埋め込みたい場所に 「ウィジェットを追加」します。
* ウィジェットの一覧から「映像」を選びます。 ![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/77yr_12ln7kl.png)
    
* 選択した「映像」パーツを、ウェブページ内の好きな位置にドラッグ＆ドロップで配置します。
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/77ys_1a065cm.png)

#### 2. 動画情報の入力

* 配置した「映像」ウィジェットの設定画面を開きます。
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/77yt_dlmpz5.png)

**YouTubeの場合**

* 各動画サイトで、共有オプションを開きます。
* 【YouTube】動画下の「共有」ボタンからリンク（URL）をコピーします。
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/77yu_1b9rh2u.png)
**Vimeoの場合**
* Vimeoの動画の共有画面を開き、「埋め込み」から埋め込みコード全体をコピーします。
※「リンク」欄のURLではなく、埋め込みコードを使用してください。
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/image_wnfpmn.png)

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

![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/77yw_1w4p81u.png)

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

各サイトで提供されている 埋め込みコードを取得します（通常、共有オプションの中に「埋め込み」という項目があります）。
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/77yx_116qxb6.png)
* 埋め込みコード（HTML形式の長い文字列）をコピーします。
* コネクティッドワンの「映像」ウィジェットの「映像元のURL」欄に、コピーした埋め込みコードを貼り付けます。

#### 3. サムネイルの設定（任意）

* 動画のサムネイルを変更したい場合は、「映像」ウィジェットの編集画面を開きます。    
* **「カスタムサムネイルを使用」**という項目を選択します。  
  ![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/77yy_xr3iic.png)
* 任意の画像ファイルを事前にアップロードし、独自のサムネイルを設定します。  
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/image_y0vt29.png)
* サムネイルを設定すると、通常、中央に再生ボタンが表示されます。    
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/77yr77yq_1lcarkz.png)
* YouTubeなどの場合、デフォルトのタイトル表示を隠すためにもサムネイルを活用できます。

#### 5. デザインの調整（任意）

* 「映像」ウィジェットの編集画面で、影などのデザイン効果を追加できます。    
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/77yr77yr_1gcs75b.png)
* 例えば、外側に影をつけると、動画をより目立たせることができます。    
* 影の位置や大きさも調整可能です。
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/77yr77ys_1l9y6ui.png)

#### 6. サイズの調整（任意）

* 編集画面で「映像」ウィジェットを選択すると、上下左右に矢印が表示されます。    
* 矢印をドラッグして、動画の幅や高さを直感的に調整できます。   
* また、ウィジェット右下の黒い部分（サンプル画像では白で表示）をドラッグすると、縦横比を保ったままサイズを変更できます。
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/2_qvslj7.png)

#### 7. 配置の調整（任意）

「映像」ウィジェットの編集画面で、三本線アイコン（アライメント調整）をクリックします。
    
* 左揃え、中央揃え、右揃えなどから選び、動画の配置を整えます。    
* カラムの中央に動画を配置することも可能です。
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/77yr77yt_1727kwy.png)

#### 8. 保存と再生確認

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




# 動画機能一覧

[ビデオプレイリストの作成方法](https://con-one.crisp.help/ja/article/44ot44oh44kq44ox44os44kk44oq44k544oi44gu5l2c5oiq5pa55rov-1y25rw8/)

[無制限に動画公開をする方法（ファイルマネージャー活用）](https://con-one.crisp.help/ja/article/54sh5yi26zmq44gr5yuv55s75yws6zal44ks44gz44kl5pa55rov77yi44ov44kh44kk44or44oe44on44o844k444oj44o85rs755so77yj-s002p3/)

[オートメーション動画機能（ビデオマネージャー活用）](https://con-one.crisp.help/ja/article/44kq44o844oi44oh44o844k344on44oz5yuv55s75qmf6io977yi44ot44oh44kq44oe44on44o844k444oj44o85rs755so77yj-8o2dfr/)

[動画の埋め込み方法！（外部サイトの動画埋め込み）](https://con-one.crisp.help/ja/article/5yuv55s744gu5zl44kb6l6844g5pa55rov77yb77yi5asw6yoo44k144kk44oi44gu5yuv55s75zl44kb6l6844g77yj-9ulw60/)




