登録フォームのフッターに動画を埋め込むには？

2021年3月8日2021年11月6日

登録フォームに、YouTubeなどの動画を埋め込むことができます。
登録してもらうメルマガやサービスの情報、登録にあたってお知らせしたいことなど動画コンテンツの掲載にご活用ください。

オレンジフォームのヘッダ＆フッダ編集で、追加することができます。

登録フォームにYouTubeなどの動画を掲載する方法

１. 使用する動画の共有リンクを取得します

公開済の動画を用意します。

ご自身のメルマガやサービスの説明動画や、インフォメーションを準備しましょう。
動画共有サービスの注意事項を守りましょう。

YouTubeなど動画共有サービスは、共有のためのリンクを動画付近のメニューから取得できます。

YouTubeで公開しているオレンジフォーム解説動画を例にご説明します。

フォームに埋め込みたい動画の右下のメニューで共有をクリックします。

次に表示される画面で埋め込むをクリックします。

次に表示される画面でコピーをクリックします。動画のリンクのソースコードがクリップボードにコピーされます。

２. ヘッダ＆フッタ編集に動画のHTMLソースを追記します

フォーム設定＞[登録ページ （ヘッダ＆フッタ編集）]をクリックして開きます。

動画コンテンツを、今回はフッターに追加します。

<center>
<iframe width="400" height="250" src="https://動画コンテンツのURL/" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</center>


• 「<iframe 」から始まる「iframe要素の中の「src="」以降が動画コンテンツのURLです。
  YouTubeならば「共有」＞「埋め込む」＞「コピー」でiframe要素に加工した動画コンテンツURLを取得できます。
• クリップボードにコピーしたiframe要素をそのままフッターの入力欄にペーストして編集してください。
• width: 動画コンテンツの幅
• height: 動画コンテンツの高さ

編集が完了したら、「更新」ボタンを押して保存します。

「登録ページを更新しました。」（①）と表示されるのを確認します。

「フォーム表示」（②）をクリックして、登録フォームを表示し確認します。

動画が登録フォームの下に表示されます。幅と高さを調整してください。

この表示例の埋め込み動画は、目安として、幅400px、高さ250pxです。

【まとめ】

動画の共有リンクを取得し、登録フォームのフッターにHTMLタグを使って表示する方法をご説明しました。
登録のご説明や、メルマガ、サービスの導入にご活用いただけます。