How to Create Dynamic Bootstrap Popup With Jquery

If you are an HTML developer and finding how to create dynamic bootstrap popup with jquery, you are at the right place. In this article, you got the solution and can take advantage of JavaScript for yourself.

Sometimes HTML developer faces an issue like how to reduce HTML code while creating a web page. JavaScript is a very helpful open-source programming language to make HTML more advanced.

Update Youtube Video URL in Bootstrap Popup

We are updating the youtube URL in a single bootstrap Popup with the help of Javascript and jquery. You have to follow some steps to do this:

Download Bootstrap 5 and Jquery Library Code

You have to download Bootstrap 5 source code and Jquery library or you can use cdn as well. Link Bootstrap 5 and Jquery to your HTML file.

Create Video Section

Write HTML code to your video section as you want to display on the project. You can copy the below code:

<div class="container">
    <h1 class="h4 my-4">Create dynamic Bootstrap Popup with Jquery</h1>
    <div class="row">
        <div class="col-md-4">
            <figure class="position-relative d-flex justify-content-center align-items-center activeVideo" data-bs-toggle="modal" data-bs-target="#staticBackdrop" data-video-url="t0Q2otsqC4I">
                <img src="images/SKF_1970.jpg" alt="Thumbnail" class="img-fluid" />
                <img src="images/cat-ep-play.svg" alt="Play Icon" class="img-fluid position-absolute" />
            </figure>
        </div>
        <div class="col-md-4">
            <figure class="position-relative d-flex justify-content-center align-items-center activeVideo" data-bs-toggle="modal" data-bs-target="#staticBackdrop" data-video-url="YPC1umSUNBA">
                <img src="images/SKF_1970.jpg" alt="Thumbnail" class="img-fluid" />
                <img src="images/cat-ep-play.svg" alt="Play Icon" class="img-fluid position-absolute" />
            </figure>
        </div>
        <div class="col-md-4">
            <figure class="position-relative d-flex justify-content-center align-items-center activeVideo" data-bs-toggle="modal" data-bs-target="#staticBackdrop" data-video-url="2MURbXaBjjI">
                <img src="images/SKF_1970.jpg" alt="Thumbnail" class="img-fluid" />
                <img src="images/cat-ep-play.svg" alt="Play Icon" class="img-fluid position-absolute" />
            </figure>
        </div>
    </div>
  </div>

Create Bootstrap Popup

We are using the default popup code from the official website of Twitter Bootstrap. You can use your own style to show popup or simply the below code and paste it into your project.

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
  aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5> <button type="button" class="btn-close"
          data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body"> <iframe id="VideoURLInt" width="100%" height="315" src="" title="YouTube video player"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowfullscreen></iframe> </div>
      <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button> </div>
    </div>
  </div>
</div>

Update the video URL Onclick

Copy the below code and paste it to your external Javascript. We are using some lines of code to update the video URL in the single popup with help of Jquery. Jquery is a library of JavaScript which is the most popular programming language.

$(".activeVideo").click(function(){ 
let videoPath = "https://www.youtube.com/embed/"; 
let videoName = $(this).data("video-url"); let URL = videoPath + videoName; $("#VideoURLInt").attr("src",URL); 
});

By following these above-mentioned steps, you will be able to write the codes in fewer lines. Thus, the DOM size is also reduced. Therefore, your HTML page will be rendered quickly and the page will be loaded faster for the audience. It will increase the website page score further and create a better impression.

You can also download the ZIP file and skip the above steps and directly get your hands on the codes. Click here to Download