嵌入HTML5视频播放器的iframe在Facebook无法渲染问题咨询

1. Open Graph（OG）媒体元标签配置 #

Facebook爬虫会优先读取OG标签识别页面内的媒体资源，必须添加视频专属OG标签：

<!-- 基础类型配置 -->
<meta property="og:type" content="video.other">
<meta property="og:title" content="视频标题">
<meta property="og:description" content="视频描述">
<!-- 视频资源配置 -->
<meta property="og:video" content="你的视频文件直链地址">
<meta property="og:video:type" content="video/mp4">
<meta property="og:video:width" content="视频宽度数值，如1280">
<meta property="og:video:height" content="视频高度数值，如720">
<!-- HTTPS环境专属配置，必须填写 -->
<meta property="og:video:secure_url" content="HTTPS协议的视频直链地址">

所有页面和视频资源必须使用HTTPS协议，Facebook会拦截所有HTTP协议的不安全资源加载。

2. HTML5 video标签属性适配 #

• 必须添加playsinline、webkit-playsinline属性，避免Facebook移动端环境强制拦截视频播放：

<video 
  src="你的视频地址"
  controls
  playsinline
  webkit-playsinline
  preload="metadata"
>
  您的浏览器不支持HTML5视频播放
</video>

• 不要通过JavaScript动态注入video标签，尽量将video标签直接写在HTML静态结构中，Facebook爬虫不会执行复杂JS逻辑来识别媒体资源。

3. 跨域与嵌入权限配置 #

• 配置页面响应头的X-Frame-Options参数，不要设置为DENY或SAMEORIGIN；如果配置了内容安全策略CSP，需要添加规则：frame-ancestors https://*.facebook.com https://*.fbcdn.net;，允许Facebook域名嵌入你的iframe。
• 视频资源的响应头需要配置Access-Control-Allow-Origin规则，允许跨域访问，避免CORS拦截导致视频加载失败。

4. 页面逻辑限制 #

• 不要添加判断window.top !== window.self就跳转、隐藏内容的反嵌入JS逻辑，这类逻辑会在Facebook的iframe沙箱环境中触发，导致内容无法正常渲染。
• 页面不要添加自动跳转逻辑，Facebook爬虫抓取时如果检测到跳转，会判定为无效内容。

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