動画チュートリアル：Figmaのバナーエクスポートに動画を埋め込む

この動画では、Bannerifyプラグインを使ってバナーに動画ファイルを埋め込む方法を紹介します。

YouTube・Vimeoのリンクは使えません。 まずDropboxなどのサービスに動画をアップロードし、.mp4動画ファイルのURLに直接リンクする必要があります。

ホスティングした動画のURLは、HTMLエクスポートではデフォルトでリモートのままです。 Bannerifyは、.mp4・.webmの動画埋め込みURLを、動画をZIPにダウンロードせずにそのままエクスポートしたHTMLに残します。ホスティングした動画ファイルをHTMLエクスポートのZIPにまとめるには、埋め込みURLの欄の横にあるDownload videos into ZIPを有効にしてください。Google Ads HTML5とGoogle App Campaign Playableの入稿では、ZIPでの入稿がパッケージした動画ファイルに対応していないため、動画埋め込みURLは引き続きまとめられません。

Figma Plugin APIはFigmaファイルのレイヤーから動画ファイルを直接読み込むことに対応していませんが、Bannerifyでは.mp4または.webmファイルへの直接のURLを貼り付けることで、タイムラインのテキスト以外のレイヤーに動画を埋め込めます。

動画ファイルは、Pixabayなどのサイトで無料のストック動画から探すか、自分の.mp4または.webmファイルをDropboxやBackblaze B2などのファイルホスティングサービスにアップロードし、そのURLリンクをコピーしてBannerifyのアニメーションで使います。

デフォルトでは動画は自動でループしますが、必要に応じてLoop Embedトグルをオフにして変更できます。

レイヤーから動画アニメーションを削除するには、もう一度Settingsアイコンボタンをクリックし、動画埋め込みの入力欄からURLを削除します。

Dropboxのリンクをコピーする場合は、動画ファイルそのものに直接リンクしていることを確認してください（URLに.mp4が含まれているはずです）。Dropboxの「Share」・「Copy Link」ボタンは、Dropboxの画面のどこから使うかによって、フォルダ全体へのリンクになることがあります。

動画ファイルのURLの一括適用 ほかのレイヤー設定と同じように、一括適用機能を使って、動画ファイルのURLの設定をレイヤーにまとめて適用することもできます。

スプレッドシートを使った動画・Lottieの差し替え バリエーションのワークフローで、.mp4、.webm、.jsonへの直接のURLや、アップロードしたZIPのソースに同梱された対応する.mp4、.webm、.jsonファイルを使うと、エクスポート時にスプレッドシートの行ごとに埋め込みメディアを差し替えることもできます。

動画埋め込みの合計サイズは4mb未満に抑えてください。 Chromeが導入した重い広告に関するポリシーの更新によって、バナー広告がブロックされるのを防げます。