youtube api绑定到窗口，而不是绑定到沙箱iframe中

Question

我正在尝试将youtube api包装在一个沙盒iframe中，并仅赋予其所需的权限。

我正在使用react-frame-component包将youtube播放器组件包装在沙盒iframe中。我已经调试了一下，直到我知道为什么视频没有显示，但无法弄清楚为什么会发生。

当youtube-api用youtube iframe替换原始html元素时，youtube api无法找到指定的元素，因为它位于沙盒iframe内。以下代码是一些已获取并执行的youtube代码。我已经发表了一条评论，解释了我为使youtube代码正常工作所做的更改，但是问题是youtube api没有在沙盒iframe的上下文中运行。

function W(a, b, c) {
    this.h = this.a = this.b = null;
    this.g = this[r] || (this[r] = ++t);
    this.c = 0;
    this.A = !1;
    this.s = [];
    this.f = null;
    this.l = c;
    this.m = {};
    c = document;

    // Here, the document is not the document of the iframe, but the
    // document of the entire page. I need this to be something like
    // window.frames["myIframe"].contentDocument.getElementById(a)

    if (a = l(a) ? c.getElementById(a) : a)
        if (c = "iframe" == a.tagName.toLowerCase(),
        b.host || (b.host = c ? Ba(a.src) : "https://www.youtube.com"),
        this.b = new Wa(b),
        c || (b = Ya(this, a),
        this.h = a,
        (c = a.parentNode) && c.replaceChild(b, a),
        a = b),
        this.a = a,
        this.a.id || (a = b = this.a,
        a = a[r] || (a[r] = ++t),
        b.id = "widget" + a),
        R[this.a.id] = this,
        window.postMessage) {
            this.f = new M;
            Za(this);
            b = V(this.b, "events");
            for (var d in b)
                b.hasOwnProperty(d) && this.addEventListener(d, b[d]);
            for (var e in Sa)
                $a(this, e)
        }
}