目次
目次
このドキュメントは、Framerを学ぶ日本のユーザーが日本語の資料不足で経験する困難を解決するために、公式ブログの内容を日本語に翻訳し、実務に役立つ情報を追加しました。Framerをお使いの皆様に少しでもお役に立てれば幸いです。
CMSページに動画を追加する方法
Framer CMSではYouTube、Vimeo、自社ホスティング、直接アップロードした動画すべてを連携させることができます。どの動画でもCMSデータに接続すれば、動的に管理し、ページごとに異なる表示が可能です。
YouTube、Vimeo、自社ホスティング動画の追加方法
1. CMSフィールドを準備する
CMSコレクションにPlain textフィールドを追加し、名前をVideo URLに指定してください。
2. 動画URLを入力する
各CMSアイテムに適した動画URLをVideo URLフィールドに入力してください。（動画がないアイテムは空白のまま）
3. 動画コンポーネントを挿入する
詳細ページのキャンバスでInsertメニューからYouTube、Vimeo、またはVideoコンポーネントを追加してください。URL入力欄の横の+ボタンをクリックしてSet Variable → Video URLを選択すると、各CMSアイテムの動画リンクが自動的に適用されます。
CMSに直接動画ファイルをアップロードする方法
ファイルアップロードフィールドを作成する
CMSコレクションにFileフィールドを追加してください。（mp4ファイルなどを直接アップロードできます。）
動画ファイルをアップロードする
各CMSアイテムに適した動画をアップロードしてください。
（ただし、Framerはファイルサイズの制限がありますので、適切なファイルサイズを準備する必要があります。）
動画コンポーネントを挿入する
InsertメニューからVideoコンポーネントを追加し、SourceをUploadに設定してください。URLの横の+ボタンを押してSet Variable → Fileを選択すると、CMSにアップロードされた動画が自動的に呼び出されます。
動画がない場合の空白を隠す
動画がないCMSアイテムの場合、そのエリアが空白にならないように条件表示（Conditionals）を設定するのがお勧めです。
動画コンポーネントを選択した後、右側のVisible項目でSet Variable → File → Is setを設定すると、動画がある時にのみそのエリアが表示されるように整理できます。
このような場面に役立ちます
ブログ詳細ページに動画レビューを追加する
製品詳細ページに使い方動画を挿入する
ポートフォリオページにプロジェクトデモ動画を含める
皆さんなら、どのページにこの機能を適用したいですか？
この記事はFramer公式ブログの‘How to add video components to your CMS pages’を翻訳・脚色したコンテンツです。
