How to Add a YouTube Popup Video Player Button to Your Blogger Website

In this article, I will show you how to add a Popup YouTube Video Player to your Blogger website.

Popup video players improve the user experience by letting people watch videos without leaving the page. They boost engagement, save space, present videos in context, allow customization, and optimize performance. Overall, they provide a user-friendly and engaging way to display videos.

Here is the code for a Popup YouTube player using JavaScript and HTML:

<style>
        .popup-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(0, 0, 0, 0.8);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .popup-container.show {
            opacity: 1;
            pointer-events: auto;
        }

        .close-button {
            position: absolute;
            top: 30px;
            right: 30px;
            color: #ffffff;
            cursor: pointer;
            font-size: 25px;
        }

        .video-container {
            position: relative;
            width: 80%;
            max-width: 800px;
            margin: 0 auto;
        }

        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .play-button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: fit-content;
            height: 40px;
            background-color: #4caf50;
            color: #ffffff;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
        }

        .play-button svg {
            width: 20px;
            height: 20px;
            margin-right: 8px;
        }

        @media only screen and (max-width: 768px) {
            .video-container {
                width: 90%;
                padding-top: 56.25%; /* 16:9 aspect ratio */
            }
        }

        @media only screen and (min-width: 769px) and (max-width: 1024px) {
            .video-container {
                width: 700px;
                height: 393.75px; /* 16:9 aspect ratio */
            }
        }

        @media only screen and (min-width: 1025px) {
            .video-container {
                width: 800px;
                height: 450px; /* 16:9 aspect ratio */
            }
        }
    </style>

    <button id="popup-button" class="play-button">
        <svg viewBox="0 0 24 24">
            <path fill="#ffffff" d="M8,5.14V19.14L19,12.14L8,5.14Z" />
        </svg>
        Watch Now
    </button>

    <div id="popup-container" class="popup-container">
        <span class="close-button" onclick="closePopup()">X</span>
        <div class="video-container">
            <iframe id="youtube-iframe" src="" frameborder="0" allowfullscreen></iframe>
        </div>
    </div>

    <script>
        function openPopup(videoId) {
            var popupContainer = document.getElementById('popup-container');
            var youtubeIframe = document.getElementById('youtube-iframe');

            youtubeIframe.src = "https://www.youtube.com/embed/" + videoId;
            popupContainer.classList.add('show');
        }

        function closePopup() {
            var popupContainer = document.getElementById('popup-container');
            var youtubeIframe = document.getElementById('youtube-iframe');

            youtubeIframe.src = "";
            popupContainer.classList.remove('show');
        }

        var popupButton = document.getElementById('popup-button');
        popupButton.addEventListener('click', function() {
            openPopup("VIDEO_ID_HERE");
        });
    </script>

In this code, replace “VIDEO_ID_HERE” with the actual YouTube video ID you want to load.

If you want to add multiple buttons on the same page to open different videos in the popup, you can modify the JavaScript code to handle multiple video IDs and dynamically set the video ID when a button is clicked. Here’s an example of how you can achieve that:

<style>
        /* Styles for popup and video container */

        /* ... (previous CSS styles) ... */

    </style>
    
    <button id="popup-button1" class="play-button" data-video-id="VIDEO_ID_1">
        <svg viewBox="0 0 24 24">
            <path fill="#ffffff" d="M8,5.14V19.14L19,12.14L8,5.14Z" />
        </svg>
        Play Video 1
    </button>

    <button id="popup-button2" class="play-button" data-video-id="VIDEO_ID_2">
        <svg viewBox="0 0 24 24">
            <path fill="#ffffff" d="M8,5.14V19.14L19,12.14L8,5.14Z" />
        </svg>
        Play Video 2
    </button>

    <!-- ... Add more buttons as needed ... -->

    <div id="popup-container" class="popup-container">
        <span class="close-button" onclick="closePopup()">X</span>
        <div class="video-container">
            <iframe id="youtube-iframe" src="" frameborder="0" allowfullscreen></iframe>
        </div>
    </div>

    <script>
        function openPopup(videoId) {
            var popupContainer = document.getElementById('popup-container');
            var youtubeIframe = document.getElementById('youtube-iframe');

            youtubeIframe.src = "https://www.youtube.com/embed/" + videoId;
            popupContainer.classList.add('show');
        }

        function closePopup() {
            var popupContainer = document.getElementById('popup-container');
            var youtubeIframe = document.getElementById('youtube-iframe');

            youtubeIframe.src = "";
            popupContainer.classList.remove('show');
        }

        var popupButtons = document.querySelectorAll('.play-button');
        popupButtons.forEach(function(button) {
            button.addEventListener('click', function() {
                var videoId = this.getAttribute('data-video-id');
                openPopup(videoId);
            });
        });
    </script>

Each button has a "data-video-id" attribute that holds the YouTube video ID. The JavaScript code finds all elements with the class "play-button" and adds a click event listener to each button. When a button is clicked, it gets the "data-video-id" value and uses the "openPopup" function to open the video in a popup.

Related Posts

You can add as many buttons as you need, and each button can have a unique "data-video-id" attribute. Replace "VIDEO_ID_1," "VIDEO_ID_2," and so on with the actual YouTube video IDs you want to load for each button.

I hope this guide helps you add a YouTube popup video player button to your Blogger website. If you have any questions, please ask in the comment section.