YouTube iframe嵌入无法实现自动播放、循环且隐藏控制栏问题求助

问题原因 #

• 自动播放失效：目前所有主流浏览器都默认拦截非静音状态的媒体自动播放行为，避免未经用户许可的声音扰民，没有配置静音参数的YouTube视频无法直接触发自动播放。
• 循环播放失效：YouTube嵌入式播放器的loop参数无法单独生效，必须搭配playlist参数，且playlist参数值设置为当前播放的视频ID，循环规则才会被播放器识别。

修正后代码 #

<div style="position: fixed; z-index: -99; width: 100%; height: 100%">
    <iframe width="100%" height="100%" src="https://www.youtube.com/embed/3fRxOjkik0g?autoplay=1&mute=1&loop=1&playlist=3fRxOjkik0g&controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; muted" allowfullscreen></iframe>
</div>

补充说明 #

• showinfo参数已经被YouTube官方废弃，保留或删除都不会影响显示效果，上述代码中已移除该冗余参数。
• 如果需要视频播放时输出声音，无法直接实现页面加载自动播放，必须通过用户点击页面任意元素的交互事件手动触发播放，这是浏览器的安全策略限制，没有规避方案。

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