Opening YouTube Videos on a Custom Button Click Using jQuery

Welcome to See Coding!

At See Coding, we simplify web development through practical tutorials and examples. Today’s post shows how to create a YouTube video modal that opens on a button click using jQuery. Perfect for websites, portfolios, or e-commerce platforms!

Step-by-Step Guide to Implementing a YouTube Modal

1. HTML Structure

Here’s a basic structure for the button and modal. (Replace VIDEO_ID with your YouTube video’s unique ID.)

2. CSS for Modal Styling

This CSS ensures your modal is responsive and visually appealing.

.video-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
}
.modal-content {
    width: 600px;
    max-width: 90%;
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
}

3. jQuery for Button Click and Video Control

This script dynamically loads the video and handles modal events.

$(document).ready(function () {
    $(".open-video").on("click", function () {
        const videoUrl = $(this).data("video");
        $("#videoIframe").attr("src", videoUrl + "?autoplay=1");
        $("#videoModal").fadeIn();
    });

    $(".close, #videoModal").on("click", function () {
        $("#videoIframe").attr("src", "");
        $("#videoModal").fadeOut();
    });

    $(".modal-content").on("click", function (e) {
        e.stopPropagation();
    });
});

---

Engage With Us!

At See Coding, we love hearing from our readers.
💡 Have ideas for improvement?
📩 Need help customizing the code?
👉 Comment below or use our Conatct us.