RevealJS幻灯片嵌入YouTube视频仅显示黑屏问题求助

1. 本地打开HTML触发跨域限制 #

• 绝大多数浏览器默认禁止本地HTML文件加载跨域资源，直接双击打开knit生成的HTML文件时会触发该规则，导致视频资源被拦截。
• 对应解决方法：
  • 方法1：直接在RStudio knit后弹出的预览窗口查看，RStudio会自动启动本地临时服务器加载页面，可规避跨域限制
  • 方法2：将生成的HTML文件部署到任意本地/线上web服务器后访问，比如在HTML文件所在目录执行python -m http.server 8080，之后访问http://localhost:8080/你的文件名称.html即可正常加载

2. iframe属性与RevealJS沙箱规则冲突 #

• RevealJS默认会对嵌入的iframe做安全限制，部分属性缺失会导致视频无法正常加载
• 对应解决方法：给iframe标签添加data-preload属性，同时补全allow属性的fullscreen权限，修改后的代码示例如下：

## Troubled Lands

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/eIchwB6xJJI" 
title="YouTube video player" 
frameborder="0" 
data-preload
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen" 
allowfullscreen>
</iframe>

3. 网络环境限制 #

如果你所处的网络环境无法正常访问YouTube，也会出现黑色加载块，可先单独访问对应YouTube视频地址确认网络连通性。

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