How to use iframe in bootstrap modal popup?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

To use iframe in bootstrap modal or popup, you put your iframe in the modal body class so when anyone opens the modal he will able to see the iframe in the modal.

See a short example of making iframe with in modal in bootstrap.

<!-- Button trigger modal -->
<button
    type="button"
    class="btn btn-primary"
    data-bs-toggle="modal"
    data-bs-target="#exampleModal"
>
    Launch modal iframe
</button>

<!-- Modal -->
<div
    class="modal fade"
    id="exampleModal"
    tabindex="-1"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true"
>
    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
        <iframe
            width="100%"
            height="200vh"
            src="https://www.youtube.com/embed/rBd0h-g59dg"
            title="YouTube video player"
            frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
        ></iframe>
        </div>
    </div>
    </div>
</div>

In this article, you will see the installation of bootstrap, create the bootstrap modal, and make an iframe in the modal.

Bootstrap installation

First, add the below meta tag in your html file in the head tag for proper responsive behavior on mobile devices.

<meta name="viewport" content="width=device-width, initial-scale=1">

Add below CSS link in your head tag to install the bootstrap 5 library

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

and javascript scripts in your body tag.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

Put the below javascript scripts in your body tag if you planning to use dropdowns, popovers, or tooltips in your project.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>

Example of iframe with bootstrap modal

Here, You have to do the following things.

  1. Create a button with a modal toggle attribute. Here, I used the data-bs-toggle="modal" and data-bs-target="#exampleModal" attribute to trigger the modal when the user clicks on it.
  2. Create a Modal and look as per your need. So, I remove the header and footer from the bootstrap modal skeleton to show like an iframe modal.
  3. Put your iframe tag with the link in the modal body. In the example, I embed a youtube video to make an iframe popup.
  4. Customize your iframe. I remove the border for the iframe and provide the appropriate width and height as per my need.
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </head>

  <body>
    <!-- Button trigger modal -->
    <button
      type="button"
      class="btn btn-primary"
      data-bs-toggle="modal"
      data-bs-target="#exampleModal"
    >
      Launch modal iframe
    </button>

    <!-- Modal -->
    <div
      class="modal fade"
      id="exampleModal"
      tabindex="-1"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body">
            <iframe
              width="100%"
              height="200vh"
              src="https://www.youtube.com/embed/rBd0h-g59dg"
              title="YouTube video player"
              frameborder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen
            ></iframe>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

The output of the above program of bootstrap modal with iframe example.

bootstrap, modal, iframe

Here, we are provided code sandbox links for the above program for the bootstrap modal with an iframe example. Then you can use it whenever you want and do the changes as per your requirements.

Try It Yourself

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

Related Posts