我需要帮助在YouTube视频播放完毕时关闭弹出窗口-解网

问：

我正在创建一个弹出窗口，其中包含在页面加载时打开的 YouTube 视频。它运行良好，但是在视频完成后，我需要帮助关闭弹出窗口。有什么建议吗？

问题是视频出现在弹出窗口中，视频完成后我需要关闭它。该视频来自youtube。我还没有找到一个插件，可以在视频完成后让您采取行动（在这种情况下，关闭弹出窗口）。

    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Popup</title>
    <style>
        /* Style for the overlay */
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            justify-content: center;
            align-items: center;
        }

        /* Style for the video container */
        .video-container {
            position: relative;
            width: 100%;
            height: 100%;
        }

        /* Style for the close button */
        .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
            color: #fff;
            font-size: 20px;
        }
      </style>
    </head>
    <body>

    <!-- Overlay with video container -->
    <div class="overlay" id="videoOverlay">
    <div class="video-container">
        <span class="close-btn" onclick="closeVideo()">X</span>
        <!-- YouTube video embed code -->
        <iframe width="100%" height="100%" src="https://www.youtube.com/embed/6aB20wVU9lA?autoplay=1&mute=1" frameborder="0" allowfullscreen></iframe>
    </div>
    </div>

    <script>
    // Function to show the video overlay
    function showVideo() {
        document.getElementById('videoOverlay').style.display = 'flex';
    }

    // Function to close the video overlay
    function closeVideo() {
        document.getElementById('videoOverlay').style.display = 'none';

        // Set a cookie to prevent the popup from showing for the next 10 minutes
        var now = new Date();
        var expires = new Date();
        expires.setTime(now.getTime() + 10 * 60 * 1000);
        document.cookie = 'popupShown=true; expires=' + expires.toUTCString() + '; path=/';
    }

    // Check if the cookie is set before showing the popup
    function checkCookie() {
        var popupShown = getCookie('popupShown');
        if (!popupShown) {
            // Show the video popup if the cookie is not set
            showVideo();
        }
    }

    // Function to get the value of a cookie by name
    function getCookie(name) {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = cookies[i].trim();
            if (cookie.indexOf(name + '=') === 0) {
                return cookie.substring((name + '=').length, cookie.length);
            }
        }
        return null;
    }

    // Call checkCookie on page load
    window.onload = checkCookie;
   </script>

   </body>
   </html>````

JavaScript HTML Cookie 弹出窗口加载

我需要帮助在YouTube视频播放完毕时关闭弹出窗口

I need help closing the popup when the YouTube video finishes playing

评论