按Facebook官方指引嵌入托管视频及加载失败问题排查

• 确认视频权限：待嵌入的Facebook视频必须设置为完全公开，私密、仅好友可见、限特定地区/人群可见的视频均无法在第三方站点嵌入，即便是账号持有者本人访问嵌入页面也无法加载。
• 校验data-href参数格式：替换的视频链接不要使用带会话参数的短链或临时链接，需使用和官方示例格式一致的完整永久链接，需剔除链接后?__tn__、?fbclid这类附加参数。
• 检查SDK加载状态：打开浏览器控制台查看网络请求，若connect.facebook.net的SDK脚本被广告拦截插件、浏览器隐私防护功能、站点内容安全策略(CSP)拦截，FB组件会无法触发渲染，对应fb-video的div就会保持折叠状态。
• 更新SDK版本：你使用的示例中v3.2属于已停止服务的旧版本SDK，Facebook现已要求使用v17及以上版本的SDK，将script标签中的version参数替换为官方当前支持的最新版本即可。
• 核对域名白名单：你部署页面的域名需要提前添加到对应Facebook开发者应用的合法域名列表中，未加白的域名会被SDK拒绝渲染嵌入组件。
• 调整测试环境：不要直接在本地用file协议打开HTML文件测试，FB SDK不支持file协议下的组件渲染，需通过本地服务用http://localhost 或线上https域名测试。

修正后可直接使用的参考代码：

<html>
  <title>我的站点</title>
<body>
  <div id="fb-root"></div>
  <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v18.0"></script>
  <h1>我的视频播放器</h1>
  <div class="fb-video"
    data-href="替换为你的公开视频完整永久链接"
    data-width="500"
    data-allowfullscreen="true"></div>
</body>
</html>

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