クリップ

クリップ要素を使用すると、YouTube や Vimeo などのサードパーティ プラットフォームでホストされているビデオを Web サイトの任意の場所に統合できます。

このセッションでは、以下の内容について学習します。

1. ビデオを追加する手順
2. ビデオ設定を調整する方法
3. ビデオの比率の確立
4. ウェブサイトにクリップを追加する別の方法
5. パーソナライズされたコードを使用してビデオを組み込む

クリップの統合

クリップ要素を 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ビデオを統合することもできます。 埋め込み機能:

1. アクセス セクションを追加
2. を置く 埋め込み特徴 ワークスペースで
3. 挿入する ビデオコード (HTMLのビデオ要素について詳しく知る)
4. 選択する 保存して閉じる