ビデオ - Webflow ヘルプ

ビデオ要素を使用すると、YouTubeやVimeoなどのサードパーティサイトにホストされているビデオをサイトのどこにでも埋め込むことができます。

ビデオを追加する方法

サイトにビデオ要素を追加する方法は2つあります：

• 追加パネルを開き、ビデオ要素をWebflowキャンバスにドラッグ＆ドロップします
• Command + E（Macの場合）またはControl + E（Windowsの場合）を押してクイックファインドを開き、ビデオ要素を検索します

ビデオ設定をフォーマットする方法

キャンバスにビデオ要素を配置すると、ビデオ設定にアクセスでき、URLやタイトルを追加できます。ビデオ設定に素早くアクセスするには：

• ビデオ要素をダブルクリックします
• ビデオ要素を選択し、要素設定パネル (D)に移動します

ビデオのURLを貼り付け、必要に応じてタイトルを追加し、Enter / Returnを押します。ビデオのサムネイルがビデオ要素に表示されます。

サポートされているビデオソース

• YouTube（YouTubeビデオをより詳細に制御したい場合は、YouTubeビデオ要素を使用してみてください）
• Vimeo
• DailyMotion
• KickStarter（メインキャンペーンURLを貼り付けるだけで、Webflowがメインキャンペーンビデオを取得します）
• TED（多言語サポート）
• Wistia
• Ustream
• Livestream
• Twitch
• Tudou
• Hulu
• SproutVideo
• Vidzflow

ビデオのサイズを設定する方法

ビデオ要素は親コンテナのサイズに従います（例：divブロックに配置すると、そのdivブロックの全幅を占めます）。ビデオにカスタムの幅と高さを設定したい場合は、カスタムのdivブロックを作成できます。そのためには、追加パネルからdivブロックをドラッグし、そのdivブロックに幅と高さの値を設定します。これで、ビデオをこのカスタムdivブロックにドラッグすると、そのサイズに合わせて表示されます。

サイトにビデオを追加する他の方法

他の要素を使用してサイトにビデオを追加することもできます。これには以下が含まれます：

• YouTubeビデオ
• 背景ビデオ
• ライトボックス
• リッチテキスト
• カスタムコード埋め込み

YouTubeビデオ要素

YouTubeビデオ要素を使用すると、YouTubeのURLからビデオを埋め込むことができます。この要素は、YouTubeの埋め込み機能が提供するすべての表示オプションを提供し、チャンネルから関連ビデオを表示したり、特定の開始時間を設定したり、ビデオコントロールを表示または非表示にしたりすることができます。YouTubeビデオ要素について詳しく知る。

背景ビデオ要素

背景ビデオ要素を使用すると、音声なしで動きのある背景を追加できます。ビデオ要素がYouTubeとVimeoのリンクのみをサポートするのに対し、背景ビデオ要素はアップロードした任意のビデオファイルを受け入れることができます。背景ビデオ要素には、サイト訪問者が背景ビデオを再生または一時停止できる再生/一時停止切り替えが組み込まれています。背景ビデオ要素について詳しく知る。

ライトボックス要素

ライトボックス要素を使用すると、サイト訪問者が動画をポップアップモーダルで開くことができます。ビデオ要素と同様に、ライトボックスはYouTubeとVimeoのリンクをサポートしています。ライトボックス要素についてもっと知る。

リッチテキスト要素とリッチテキストフィールド

リッチテキスト要素を使用すると、動画を追加することもできます。これは、リッチテキストフィールドからデータを引き出すときにさらに強力です。あるいは、ビデオ要素を使用して、コレクションのビデオフィールドからデータを動的に引き出すこともできます。コレクションビデオフィールドについてもっと知る。

カスタムコードを使用して動画を埋め込む方法

埋め込み要素を使用してHTML動画を追加することもできます：

1. 追加パネルに移動
2. 埋め込み要素をキャンバスにドラッグ
3. ビデオコードを貼り付ける (HTMLのビデオ要素についてもっと知る)
4. 保存して閉じるをクリック

---

Webflowヘルプに戻る