この投稿は公式のWebflow Universityを元に作成しました。翻訳したテキストと画像は引用元のものを使用する場合があります。
引用元YouTubeやVimeoのようなサードパーティのサイトでホストされているビデオを埋め込むには、video要素を使用してください。
ビデオの追加方法
サイトにビデオ要素を追加するには、2つの方法があります：
- Add panelを開き、キャンバスにビデオ要素をドラッグ＆ドロップします。
- Command + E（Macの場合）またはControl + E（Windowsの場合）を押してQuick find(クイック検索)を開き、ビデオ要素を検索します。
ビデオ設定のフォーマット方法
キャンバスにビデオ要素を配置すると、ビデオ設定にアクセスできるようになり、URL とタイトルを追加できます。ビデオ設定にすばやくアクセスするには
- ビデオ要素をダブルクリックします。
- ビデオ要素を選択し、Element settings panel（D）に進みます。
動画のURLを貼り付け、必要に応じてタイトルを追加し、Enter/Returnキーを押します。動画のサムネイルがビデオ要素に表示されます。
対応ビデオソース
- YouTube（YouTubeのビデオをもっとコントロールしたい場合は、YouTubeのビデオエレメントを使ってください）
- Vimeo
- DailyMotion
- KickStarter (メインキャンペーンのURLを貼り付けるだけで、Webflowがメインキャンペーンのビデオを取得します)
- TED（多言語対応）
- Wistia
- Ustream
- Livestream
- Twitch
- Tudou
- Hulu
- SproutVideo
重要：現在のところ、アセットパネルに動画ファイルをアップロードしてビデオ要素で使用することはサポートしていません。ただし、背景動画として動画をアップロードすることはできます。
動画寸法の設定方法
video要素は、親コンテナの寸法を尊重します（divブロック内にドロップすると、そのdivブロックの幅いっぱいに表示されます）動画の幅と高さをカスタマイズしたい場合は、カスタムdivブロックを作成します。そのためには、Add panelからdivブロックをドラッグし、そのdivブロックに幅と高さを指定します。これで、動画をこのカスタム divブロックにドラッグすると、そのサイズに収まるようになります。
サイトに動画を追加するその他の方法
また、他の要素を使ってサイトに動画を追加することもできる：
- YouTube video
- Background video
- Lightbox
- Rich text
- Custom code embed
YouTube video要素
YouTube video要素を使用すると、YouTube URLから動画を埋め込むことができます。この要素を使用すると、YouTube の埋め込み機能で提供されるすべての表示オプション（チャンネルからの関連動画の表示、特定の開始時間の設定、動画コントロールの表示/非表示など）を利用できます。
バックグラウンドビデオ要素
background video要素では、音声なしのモーション背景を追加できます。YouTubeとVimeoのリンクのみをサポートするvideo要素とは異なり、background video要素は、あなたがアップロードした任意のビデオファイルを受け入れることができます。また、background video 要素には再生/一時停止のトグルが組み込まれているため、サイト訪問者は好きなように背景ビデオを再生または一時停止することができます。 background video要素の詳細については、こちらをご覧ください。
Lightbox要素
lightbox要素を使用すると、サイト訪問者はポップアップモーダルで動画を開くことができます。vビデオ要素と同様に、lightboxはYouTube とVimeoのリンクをサポートしています。lightbox要素の詳細については、こちらをご覧ください。
Rich text elementとrich text field
Rich text要素では、動画も追加できます。これは、サイトのコンテンツ編集者がサイトのページに動画を追加するのに最適な方法です。CMSコレクションのrich text fieldからデータを引き出すために使用すると、さらに強力です。
また、video要素を使用して、Collectionのvideoフィールドから動的にデータを取り込むこともできます。Collection の video フィールドの詳細については、こちらをご覧ください。
カスタムコードを使用して動画を埋め込む方法
embed要素を使ってHTML動画を追加することもできます：
- Add panel
- embed elementをキャンバスにドラッグ
- video code をペースト
- Save & closeをクリック