javascript - 该网站如何以叠加方式显示此 YouTube 视频？

Question

我一直在尝试了解此站点 Meg 的 main.min.js 文件中的哪一段代码将 YouTube 视频作为 iframe 插入叠加层中。

<iframe id="auto-play-vid" frameborder="0" allowfullscreen="1" allow="autoplay; encrypted-media" title="YouTube video player" width="100%" height="360" src="https://www.youtube.com/embed/bsLk0NPRFAc?rel=0&amp;playsinline=0&amp;autoplay=1&amp;controls=1&amp;enablejsapi=1&amp;showinfo=0&amp;suggestedQuality=hd720&amp;wmode=transparent&amp;iv_load_policy=3&amp;origin=http%3A%2F%2Foutlawed-movie.test%3A8888&amp;widgetid=2"></iframe>

当我下载代码时，id="youtube-overlay"为空，它没有包含 youtube 视频的 iframe。但是当我在浏览器中打开 index.html 文件时，视频就会播放...为什么以及如何完成此操作？

    </div>
    <div id="auto-play-close">
        <div class="back">
            <svg fill="#ffffff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
                <path d="M0 0h24v24H0z" fill="none" />
            </svg>
        </div>
        <div class="front">
            <svg fill="#c7ef00" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
                <path d="M0 0h24v24H0z" fill="none" />
            </svg>
        </div>
    </div>
</div>

Answer 1

    function e() {
        $("#youtube-overlay").css("display", "flex"),
        utilsController.checkYouTube() ? setTimeout(function() {
            t = function() {
                try {
                    n.pauseVideo()
                } catch (e) {}
            }
            ,
            s = function() {
                try {
                    n.playVideo()
                } catch (e) {}
            }
            ,
            h || _isIpad || ($(window).bind("focusout", t),
            $(window).bind("focusin", s)),
            $("#auto-play-close").on("click", function() {
                try {
                    n.destroy()
                } catch (e) {
                    console.log(e)
                }
                h || _isIpad || ($(window).unbind("focusout", t),
                $(window).unbind("focusin", s)),
                $("#youtube-overlay").css("display", "none"),
                v = !1,
                _ && b(),
                i && "true" === i && f()
            }),
            n = new YT.Player("auto-play-vid",{
                width: "100%",
                videoId: o,
                playerVars: {
                    rel: 0,
                    playsinline: 0,
                    autoplay: h || _isIpad ? 0 : 1,
                    controls: 1,
                    enablejsapi: 1,
                    showinfo: 0,
                    suggestedQuality: "hd720",
                    wmode: "transparent",
                    iv_load_policy: "3"
                },
                events: {
                    onReady: onPlayerReady,
                    onStateChange: function(e) {
                        e && 0 == e.data && ($("#youtube-overlay").css("display", "none"),
                        v = !1,
                        _ && b(),
                        f())
                    }
                }
            })
        }, 300) : setTimeout(e, 1e3)
    }()
}

这部分在运行时(大概在页面加载)以允许 div 采取其 固定 位置 0,0,0,0 (即固定在所有四个 Angular - 读作:全屏)并显示在 CSS 更改之前已经存在于 div 中的 iframe。

onStateChange 将其切换回 none 并隐藏 div，在进行了一些难以从精简代码中读取的检查后。

tldr； iframe 位于“隐藏”div 中，由上面的代码片段“显示”(以及其他不一定与问题相关的内容)