How To Add A Popup YouTube Video Player To Blogger Website

In this article, I will show you how you can add a Popup YouTube Video Player To Blogger Website.

Popup video players provide an improved user experience by allowing videos to

be watched without leaving the current page. They enhance engagement, save

space, offer contextual presentation, allow for customization, optimize

performance, and overall provide a user-friendly and engaging way to present

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><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 in 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>

Here, each button has a data-video-id attribute that specifies the YouTube video
ID. The JavaScript code selects all elements with the class play-button and adds a click event listener to each button. When a button is clicked, it retrieves the
data-video-id value and passes it to the openPopup function to open the corresponding video in the popup

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

I hope this article will help you add a Youtube Popup video player button to you Blogger website. If you have any doubt, you can ask in our Telegram channel or in the video comment section