If you want to enhance your website’s interactivity, learning how to implement a dynamic YouTube Video Popup is a game-changer for modern web performance. Instead of bloating your HTML with dozens of hidden modals for every video in your gallery, you can use a single, reusable Bootstrap 5 modal. This lightweight approach significantly reduces the DOM size, leading to faster rendering and a smoother user experience.
Why Use a Single Dynamic Modal?
- Faster Loading: Reduces HTML code by 70-80% for large galleries.
- Better SEO: Improved page speed scores (Core Web Vitals).
- Easy Maintenance: Update the player style in one place instead of dozens.
Step 1: Include Required Dependencies
Ensure you have the Bootstrap 5 CSS/JS and JQuery library linked in your <head> or before the closing </body> tag.
<!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery Library --> <script src="https://code.jquery.com/jquery-3.6.2.min.js"></script> <!-- Bootstrap 5 JS Bundle --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>Step 2: Create the Video Gallery
Use a data-video-url attribute on your trigger elements to store the unique YouTube Video ID.
<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>Step 3: Set Up the Reusable Modal Structure
The iframe starts with an empty src to prevent videos from loading in the background when the page first opens.
<!-- 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>Step 4: The jQuery Script
Copy the code below and paste it to your external JavaScript. We are using some lines of code to update the video URL in the single popup with the help of jQuery. jQuery is a library of JavaScript, which is the most popular programming language.
$(document).ready(function() {
// Inject Video ID on Click
$(".activeVideo").click(function() {
const videoId = $(this).attr("data-video-url");
const finalURL = `https://www.youtube.com/embed/${videoId}?autoplay=1&rel=0`;
$("#VideoURLInt").attr("src", finalURL);
});
// Clear Video on Modal Close (Prevents background audio)
$('#videoModal').on('hidden.bs.modal', function () {
$("#VideoURLInt").attr("src", "");
});
});Fix: “Video Player Configuration Error” (Error 153)
If you see Error 153 or Content Unavailable, it is usually caused by:
- Direct File Access: Running your code via
file://instead ofhttp://. Always use a local server like VS Code Live Server. - Wrong Methods: Using
.play()or.load()on an iframe. These methods are for<video>tags only. For iframes, only thesrcattribute should be modified. - Invalid IDs: Double-check that the
data-video-urlcontains only the ID (e.g.,t0Q2otsqC4I) and not the full YouTube link.
By following the above-mentioned steps, you will be able to write the code 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
