[BLOGGER] Source Code Popup Video Youtube

Hi mọi người, thủ thuật hiển thị video youtube popup cho người dùng blogger, hay nhưng trang website khác. Nó sẽ thủ gọn lại bài viết và tối ưu tốc độ tải trang cho những anh chị em nào muốn tối ưu tốc độ tải.

Chúng ta bắt đầu với thủ thuật này nhé.
Đầu tiên các bạn thêm đoạn CSS này vào trước thẻ </head>

 .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: auto;
            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 */
            }
        }

Và tiếp theo chúng ta thêm đoạn Javascript vào nới mà bạn muốn hiển thị video

   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("PhTb4UjNrzE");
        });

Ở phía trên đoạn code bạn lưu ý luôn là phần mình bôi đỏ, đó là ID của video bạn muốn hiển thị, các bạn lưu ý và thay đoạn ID của video bạn muốn hiển thị nhé.

Và cuối cùng là các bạn thêm đoạn code sau vào nơi bạn muốn hiển thị nút bấm để hiển thị Popup Video Youtube là hoàn thành việc xem popup video youtube.

<center>
    <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>
      VIDEO DEMO How to using HTML and CSS code viewer
    </button>
  </center>
    <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>

Chúc mọi người thành công với thủ thuật đơn giản này.

DEMO POPUP VIDEO YOUTUBE