Webflowのビデオ機能を使用してビデオを動的に統合する

ビデオ機能は コレクション この機能を使用すると、サードパーティのプラットフォーム (YouTube や Vimeo など) でホストされているビデオを CMS に含めることができます。これらのビデオは、コレクション リストやコレクション ページで紹介できます。ビデオ機能を使用して、コレクション リストを絞り込んだり、コレクション リストやページ内の要素の条件付き表示を設定したりすることもできます。

ビデオ機能の典型的な用途

• ランディングページ用のプロモーションビデオ
• 製品概要ビデオ
• リソースページの説明およびチュートリアルビデオ

プロセスの探究

1. ビデオ機能の開始
2. ビデオ機能にビデオを組み込む
3. ビデオ機能をビデオにリンクする
4. ビデオ機能によるコレクションリストのフィルタリング
5. ビデオ機能による条件付き表示の設定

ビデオ機能の開始

新規または既存のコレクションにビデオ機能を導入することができます。コレクション設定で、 新機能 そして、 ビデオ 特徴。

他の機能と同様に、機能が必須かどうかを定義するオプションがあります。

ビデオ機能にビデオを組み込む

ビデオ機能は、Vimeo や YouTube などのサードパーティのビデオ プラットフォームからのビデオ URL を受け入れます。

ビデオ機能はすべてのデバイスで使用できるように最適化されているため、あなたと共同作業者にとってモバイルの応答性に関する懸念がなくなります。

あなたと共同作業者は、リッチ テキスト フィールドを使用して、コレクション ページにさらに多くのビデオ コンテンツを含めることができます。

ビデオ機能をビデオにリンクする

1. コレクションリストまたはコレクションページにビデオ要素を含める
2. アクティブ化する ビデオを取得 checkboxの ビデオ設定 メニュー
3. 関連するビデオ機能と関連付ける 機能ドロップダウン

ビデオ設定にアクセスするには、テキスト要素を選択し、キャンバス上の要素ラベルの横にある設定アイコンをクリックするか、設定パネル (D) に移動します。

「「ビデオを取得」 checkbox 下 ビデオ設定。

ビデオ機能を使用してライトボックスのメディアコンテンツを取得する

1. コレクションリストまたはコレクションページにライトボックスを追加する
2. ライトボックス設定で、ビデオ機能からメディアを取得します

ビデオ機能によるコレクションリストのフィルタリング

特定のシナリオでは、ビデオ機能が構成されたコレクション アイテムのみを表示するコレクション リストを選択する場合があります。代表的な例は、ビデオ ギャラリーを作成する場合です。これを実現するには、次の手順を実行します。

1. フィルタリングするコレクションリストを選択する
2. に移動 設定パネル（D）
3. 紹介する フィルター 下 コレクションリスト設定
4. 最初のドロップダウンで関連するビデオ機能を選択します
5. 選択する 設定されています 2番目のフィールド
6. クリック 保存

ビデオ機能で使用できるフィルター基準は次のとおりです。

• 設定されています – このビデオ機能用に設定されたビデオURLを持つコレクションアイテムを識別します
• 設定されていません – このリンク機能にビデオURLが設定されていないコレクションアイテムを検索します

コレクションリストのフィルタリングについて詳しくは.

ビデオ機能による条件付き表示の設定

同様に、コレクション リストまたはページのビデオ要素に条件付きの表示ルールを設定できます。これにより、特定のコレクション アイテムにビデオ リンクが設定されている場合にのみビデオ要素が表示されるようになります。

1. ビデオ機能にリンクされたビデオ要素を選択します
2. アクセス 設定パネル（D）
3. 紹介する 状態 （この要素を表示するには） 条件付き可視性
4. 最初のドロップダウンでビデオ機能を選択します
5. 選ぶ 設定されています 2番目のドロップダウン
6. クリック 保存

条件付き可視性について詳しく学びます。