クリップ要素を使用すると、YouTube や Vimeo などのサードパーティ プラットフォームでホストされているビデオを Web サイトの任意の場所に統合できます。
このセッションでは、以下の内容について学習します。
- ビデオを追加する手順
- ビデオ設定を調整する方法
- ビデオの比率の確立
- ウェブサイトにクリップを追加する別の方法
- パーソナライズされたコードを使用してビデオを組み込む
クリップの統合

クリップ要素を Web サイトに挿入するには、次の 2 つの方法があります。
- 公開する 挿入パネル ドラッグして ビデオ Webflowキャンバスに要素を追加する
- キー入力 指示 + え (Macの場合) または コントロール + え (Windowsの場合) クイック検索 そして、 ビデオ 成分
クリップ構成の適応
キャンバス上でクリップ要素を見つけたら、 クリップ構成 URLと見出しを入力します。クリップ設定に素早くアクセスするには:
- ダブルタップして クリップ 要素
- 選ぶ クリップ 要素に移動し、 要素設定パネル(D)
動画のURLを貼り付け、必要に応じてタイトルを付けて、 入力/戻るクリップのプレビュー画像がクリップ要素内に表示されます。

サポートされているクリップの起源
- YouTube (YouTube 動画のコントロールを強化するには、YouTube 動画要素の利用を検討してください)
- ヴィメオ
- デイリーモーション
- キックスターター (メイン キャンペーンの URL を貼り付けるだけで、Webflow がプライマリ キャンペーン クリップを取得します)
- TED (複数の言語をサポート)
- ウィスティア
- ユーストリーム
- ライブストリーム
- ツイッチ
- 土豆
- フールー
- スプラウトビデオ
弊社までご連絡ください ウィッシュリスト あなたのクリップの起源が型破りなものであったとしても、私たちはそれを取り入れるよう努力します!
重要な: 現在、クリップ要素で使用するためにビデオ ファイルをアセット パネルに送信することはサポートされていません。ただし、ミュートされた背景クリップとしてビデオをアップロードすることはできます。
クリップの寸法の設定
クリップ要素は、それを囲むコンテナの寸法を忠実に反映します(例えば、divブロック内に配置された場合、そのdivブロックの幅全体を継承します)。クリップに異なる幅と高さを指定したい場合は、独自のdivブロックを生成します。divブロックを 挿入パネル div ブロックの幅と高さのパラメータを設定します。クリップをこのカスタマイズされた div ブロックに関連付けると、クリップはそのサイズに従います。

ウェブサイトにクリップを統合するための追加のアプローチ
次のような他のコンポーネントを使用して、Web サイトにクリップを挿入することもできます。
- YouTubeクリップ
- 背景クリップ
- ライトボックス
- リッチテキスト
- パーソナライズされたコードの埋め込み
YouTube クリップ要素
の YouTubeクリップ 要素を使用すると、YouTube URL からクリップをネストできます。この要素は、チャンネルの関連動画の表示、特定の開始時間の指定、動画コントロールの表示または非表示など、YouTube の埋め込み機能で利用できるすべてのプレゼンテーションの選択肢を提供します。YouTube クリップ要素の詳細をご覧ください。

モーションビデオ部門
の モーションビデオ セクションでは、音声なしで動く映像を組み込むことができます。YouTube と Vimeo の URL のみに対応するビデオ コンポーネントとは異なり、モーション ビデオ セクションではアップロードしたあらゆるビデオ ファイルを処理できます。さらに、モーション ビデオ セクションには再生/一時停止機能の組み込みトグルが含まれており、サイト訪問者がビデオの背景を制御できます。モーション ビデオ機能についてさらに詳しく知る。

ポップアップモーダルビデオ要素
の ポップアップモーダルビデオ 要素を使用すると、サイト訪問者はポップアップ モードでビデオ クリップを起動できます。ビデオ セクションと同様に、ポップアップ モーダルは YouTube および Vimeo の URL をサポートしています。ポップアップ モーダル ビデオ要素について詳しく見てみましょう。

テキスト スタイル要素とリッチ コンテンツを含むテキスト フィールド
テキスト スタイル設定セクションでは、ビデオ コンテンツを挿入することもできます。これは、CMS コレクション内のリッチ テキスト フィールドからデータを取得するために使用すると、さらに強力になります。

あるいは、 ビデオ セクションを使用して、コレクションのビデオ コンポーネントからデータを動的に取得できます。コレクションのビデオ コンポーネントの詳細をご覧ください。
カスタムコード埋め込みによるビデオの追加
HTMLビデオを統合することもできます。 埋め込み機能:
- アクセス セクションを追加
- を置く 埋め込み特徴 ワークスペースで
- 挿入する ビデオコード (HTMLのビデオ要素について詳しく知る)
- 選択する 保存して閉じる
- ワークスペーススポットとメンバーの追加または削除 - 2024年4月15日
- センタリングボックスの概要 - 2024年4月15日
- 将来の参照用にサイトを保存する - 2024年4月15日