如何完全禁用 YouTube iframe 全屏？ - Youtube iframe API答案

【问题标题】：How to completely disable YouTube iframe fullscreen? - Youtube Iframe API如何完全禁用 YouTube iframe 全屏？ - Youtube iframe API
【发布时间】：2018-12-29 15:02:14
【问题描述】：

我已经在创建 YouTube 播放器了

playerVars: {
    controls: 0,
    fs: 0,
    disablekb: 1
}

但在双击时，它仍然会进入全屏模式，虽然它会暂停然后继续播放。因此，如果我可以只禁用全屏部分，它会正常工作。

（如何）这可能吗？

【问题讨论】：

标签： javascript youtube-iframe-api

【解决方案1】：

通过自己创建 iframe，我设法解决了这个问题。代码如下：

const createYtPlayer = (videoId, container = inv) => new Promise(resolve => {
    const el = document.createElement('iframe');
    el.frameBorder = 0;
    el.setAttribute('allow', 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture');
    el.setAttribute('donotallowfullscreen', '');
    el.src = 'https://www.youtube.com/embed/' + videoId + '?disablekb=1&enablejsapi=1&controls=0&origin=' + encodeURIComponent(window.origin);
    container.appendChild(el);

    const player = new YT.Player(el, {
        height: 200,
        width: 200,
        videoId,
        playerVars: {
            controls: 0,
            fs: 0,
            disablekb: 1
        },
        events: {
            'onReady': () => {
                setBestSoundQuality(player);
                player.setVolume(100);
                resolve(player);
            }
        }
    });
});

})();

旧答案：

事实证明，这可能是一个错误。在@Paul Fitzgerald 的回答的帮助下，我做了一个解决方法，因为它有效。

由于某种原因，如果 allowfullscreen 以任何方式存在，donotallowfullscreen 属性将不起作用（并且自动添加 allowfullscreen）。

所以我加了

const iframe = player.getIframe();
iframe.removeAttribute('allowfullscreen');
iframe.setAttribute('donotallowfullscreen', '');

到 onReady 事件，它起作用了。

编辑：它似乎只适用于 Firefox。

【讨论】：

您对上述建议有意见吗？

【解决方案2】：

在 iframe 中你可以输入donotallowfullscreen

<iframe src="https://www.youtube.com/embed/test"  donotallowfullscreen>
</iframe>

【讨论】：

很奇怪。我坚持fs: 0 应该禁用全屏。然后我添加了 donotallowfullscreen ，它仍然没有工作。由于某种原因，API 添加了 allowfullscreen="1"，这有效地禁用了 donotallowfullscreen 的效果。但是，如果我删除 allowfullscreen 并添加 donotallowfullscreen，它可以工作，耶！