Chrome中多层嵌套iframe嵌入视频无法播放（已配置autoplay）求助

问题背景 #

多嵌套iframe应用在Chrome浏览器中存在视频无法播放的问题，该问题在Firefox中不会出现，已明确Chrome的自动播放政策。目前正开发新整合应用，临时通过嵌套旧站点验证价值主张，层级结构为：

siteA（顶层门户） wraps
   siteL（学习站点） wraps
      siteV（视频封装站点） wraps
         Youtube 视频

现有iframe配置 #

从顶层siteA开始的iframe结构如下：

<!-- site A -->
<iframe width="1306" height="100%" src="siteL" frameborder="0" allow="accelerometer; autoplay; camera; encrypted-media; gyroscope; picture-in-picture; microphone" allowfullscreen="" class="jsx-3934071539 w-full mt-10 mx-5">
    <!-- site L -->
    <iframe width="100%" height="600" src="siteV" frameborder="0" allow="accelerometer; autoplay; camera; encrypted-media; gyroscope; picture-in-picture; microphone" allowfullscreen="">
        <!-- site V -->
        <iframe class="flex-grow embed-view" allow="accelerometer; autoplay; camera; encrypted-media; gyroscope; picture-in-picture; microphone" allowfullscreen="1" frameborder="0" width="100%" height="100%" src="siteV">
            <!-- Youtube 视频 -->
            <iframe frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" title="The Worlds Best Porsche Restomods Are Built Here!" width="100%" height="100%" src="https://www.youtube.com/embed/-_dz-7N9k_M?autoplay=0&amp;mute=1&amp;controls=0&amp;origin=https%3A%2F%2F33bd-142-196-126-48.ngrok.io&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;iv_load_policy=3&amp;modestbranding=1&amp;widget_referrer=https%3A%2F%2Fralicentral.jubiplatform-dev.com%2F&amp;enablejsapi=1&amp;widgetid=1" id="widget2">
            </iframe>
        </iframe>
    </iframe>
</iframe>

所有iframe的allow属性均配置了autoplay权限，Youtube视频链接也设置了mute=1参数，使用最新版react-player包。

已尝试的方案及问题 #

• 在ReactPlayer组件中设置muted=true，点击播放后视频可正常播放，但无法控制音量/静音按钮
• 尝试调整集成代码，在用户点击播放时先静音加载再取消静音，视频仅逐帧跳转，暂停时触发报错：

  "Unmuting failed and the element was paused instead because the user didn't interact with the document before."

关键现象 #

绕过siteA直接访问siteL（减少一层iframe嵌套），相同测试在Chrome中可正常运行，此时嵌套结构如下：

<!-- site L -->
<iframe width="100%" height="600" src="siteV" frameborder="0" allow="accelerometer; autoplay; camera; encrypted-media; gyroscope; picture-in-picture; microphone" allowfullscreen="">
    <!-- site V -->
    <iframe class="flex-grow embed-view" allow="accelerometer; autoplay; camera; encrypted-media; gyroscope; picture-in-picture; microphone" allowfullscreen="1" frameborder="0" width="100%" height="100%" src="siteV">
        <!-- Youtube 视频 -->
        <iframe frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" title="The Worlds Best Porsche Restomods Are Built Here!" width="100%" height="100%" src="https://www.youtube.com/embed/-_dz-7N9k_M?autoplay=0&amp;mute=1&amp;controls=0&amp;origin=https%3A%2F%2F33bd-142-196-126-48.ngrok.io&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;iv_load_policy=3&amp;modestbranding=1&amp;widget_referrer=https%3A%2F%2Fralicentral.jubiplatform-dev.com%2F&amp;enablejsapi=1&amp;widgetid=1" id="widget2">
        </iframe>
    </iframe>
</iframe>

疑问与求助 #

Chrome除了自动播放政策外，是否存在iframe嵌套深度限制？或者这是否是Chrome的bug？恳请提供解决方案。

内容的提问来源于stack exchange，提问作者Stavart