メインコンテンツにスキップ

iFrameコンテンツをポップアップに表示する方法

外部コンテンツをiframeで埋め込んだポップアップを作成する方法。iframeのみを全画面表示する設定例も解説。

外部サイトのコンテンツを枠線や余白なしのポップアップとして表示するには、HTMLエレメントにiFrameを埋め込みます。

手順

  1. 新しいディスプレイを作成し、ポップアップタイプから「ポイントポップアップ」テンプレートを選択してください。

  2. エディターでテンプレート内のコンテンツをすべて削除し、フォームスイッチがオフになっていることを確認してください。

  3. 「コンテンツを追加」から「HTML」を追加してください。

  4. iFrameのwidthとheight属性にお好みの値を設定し、style="display:block;"を追加したうえで、HTMLコンテンツに貼り付けてください。

    YouTubeの場合の例:

    <iframe width="320" height="180" style="display:block;" src="https://www.youtube.com/embed/A85mx5KSHrA" title="Promolayer Debug Guide" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
  5. 「デザイン設定」>「サイズと位置」にて、「4」で設定したwidthの値を 「幅(最大)」に入れる。そして、高さ、マージン、パディングをすべて0にしてください。

  6. モバイルプレビューに切り替え、モバイル用の高さ、マージン、パディングを設定してください。

  7. 保存をクリックして完了。

こちらの回答で解決しましたか?