如何使来自嵌入式 iframe 的 YouTube 播放器正常工作而不阻止 Chrome 中的页面加载?

How to make the YouTube player from embedded iframe work and not block the page load in Chrome?

我有一个包含此代码的网页(默认情况下隐藏在 display: none 祖先)(请参阅下面的屏幕截图):

<iframe width="560" height="315" src="https://www.youtube.com/embed/YAGuGFpeIJA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

YouTube API 调用超时,加上我的 Chrome 浏览器被阻止(无法在该选项卡中打开 DevTools - 为了制作屏幕截图,我必须在导航到该选项卡之前打开 DevTools网页;页面内容上的上下文菜单不会打开)。该代码在本地 Docker 容器上运行。我认为问题与网页的 URL 有关,因为只有将此代码放在我的 WordPress 主题的 functions.php:

末尾后才会出现问题
add_action('rewrite_rules_array', 'rewrite_rules');
function rewrite_rules($rules) {
    $new_rules = array(
        '/ro/.*$' => 'index.php',
        '/en/.*$' => 'index.php'
    );
    return $rules + $new_rules;
}

This page sent me here. This 是同一 "series" 中的前一个问题。

更新: 如果我删除 iframe 的 src 属性,页面仍然被阻止,但至少微调器开始淡出。它只是部分淡出,然后我又无法以通常的方式打开 DevTools。在 DevTools 的网络选项卡中,我看到问题可能是 WP REST API 调用:

下面只是截图 - 实际问题的最后一部分。

谢谢。

截图

1

2

3

4

5

6

7

8

9

10

我不知道确切的原因以及理想情况下它应该如何表现,但为了解决我的问题,我只需要这样做:

Furthermore, permalinks will need to be refreshed (you can do this from your admin under (Settings > Permalinks) before the rewrite changes will take effect.

(取自 https://codex.wordpress.org/Rewrite_API 的步骤)