Loomとは何ですか？

Loomは、すぐに共有できるビデオを通してメッセージを伝えることを手助けするビデオメッセージングツールです。
Loomを使用すると、カメラ、マイク、デスクトップ画面を同時に録画できます。録画した動画はLoomの特許技術により即座に共有可能です。

Loom動画を埋め込む方法

1. Embedコンポーネントの追加

まずFramerエディターでInsertメニューを開き、embedを探してキャンバスにドラッグしてください。

2. Loomからembedコードを取得

1. 動画の共有ページで動画上部のShareボタンをクリックしてください。

2. Embedオプションを選択し、動画の公開範囲が「Anyone with the link」であることを確認してください。

3. Loomが提供するembedコードをそのままコピーします。

基本コードの例:

<div style="position: relative; padding-bottom: 56.074766355140184%; height: 0;">
  <iframe src="<https://www.loom.com/embed/영상ID?.>.."></iframe>
</div>

3. divタグのstyle属性を削除

Framerのembedコンポーネントと衝突しないように、上のコードの<div>に含まれているstyle属性だけを削除してください。

つまり、以下のような形になります:

<div>
  <iframe src="<https://www.loom.com/embed/영상ID?.>.."></iframe>
</div>

4. Framer Embedコンポーネントにコードを貼り付け

1. Framerに戻ってキャンバスに置いていたEmbedコンポーネントを選択してください。

2. 右パネルでHTMLタブに切り替えると表示される入力欄にコードを貼り付けてください。

3. これで、サイトをプレビューまたは公開すると、Loom動画がページ内に自然に表示されます。

5. 追加パラメータの設定

動画再生オプションや表示方法など、より詳しい設定が必要な場合はLoomサポート文書を参照してください。
それでも問題が発生する場合は、連絡先ページを通じてお問い合わせください。

よくある質問(FAQ)

Q. Embedコンポーネントをレスポンシブにするために追加設定が必要ですか？

• いいえ。FramerのEmbedコンポーネントは、デフォルトでコンテナサイズに合わせて自動的にレスポンシブに動作するため、特別なCSSを追加する必要はありません。

Q. 動画が大きすぎる場合、手動でサイズを調整する必要がありますか？

• はい。Embedコンポーネントは親Frameのサイズを基準とするため、希望するサイズにしたい場合はFrameまたはAuto Layoutの設定を調整する必要があります。

Q. 動画のサムネイル(再生前画面)をFramerで変更できますか？

• いいえ。サムネイルはLoomプラットフォームでのみ変更可能で、Framerでは操作することができません。

本記事はFramer公式ブログの「Embedding a Loom video in your site」を翻訳・アレンジしたコンテンツです。