如何使嵌入式iframe的YouTube播放器正常工作，而不阻止Chrome浏览器中的页面加载？

Question

我有一个包含此代码的网页（默认情况下为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页面发送给我这里。 This是同一“系列”中的上一个问题。

更新：

如果我删除iframe的src属性，该页面仍被阻止，但至少微调器开始淡出。它仅部分消失，然后我又无法以通常的方式打开DevTools。在DevTools的“网络”标签中，我看到了可能是问题所在的WP REST API调用：

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

谢谢。

屏幕截图

1

2

3

4

5

6

7

8

9

10

我有一个包含此代码的网页（默认情况下，显示为隐藏：无祖先）（请参见下面的屏幕截图）：

Answer 1

我不知道确切的原因以及理想情况下的行为，但是要解决此问题，我只需要这样做：