为什么Facebook嵌入iframe代码仅在移动端无法显示视频描述？

问题根因 #

Facebook官方视频播放器会通过真实设备的UA标识自动适配移动端精简模式，该模式下会强制忽略show_text参数，隐藏描述、互动按钮等附属内容。桌面端浏览器的响应式预览仅修改了视口尺寸，未触发UA识别的移动端适配逻辑，因此和真实手机表现不一致。

可行解决方案 #

• 强制指定播放器使用桌面端渲染逻辑，在iframe的src参数中追加&mobile=0，强制关闭移动端适配，示例参数拼接格式如下：

  https://www.facebook.com/plugins/video.php?你的原有参数&show_text=true&mobile=0&height=600
  

  追加参数后保持iframe的height属性固定为600px，不要使用百分比或自适应高度配置，避免内容被截断。
• 给iframe外层添加固定尺寸容器，避免移动端页面的响应式缩放挤压iframe的展示空间，容器样式参考：

  .fb-video-container {
    width: 100%;
    min-height: 600px;
    overflow: hidden;
  }
  .fb-video-container iframe {
    width: 100%;
    height: 600px;
    border: none;
  }
  

• 若上述参数配置仍不生效，可单独抓取Facebook公开的视频描述、互动数据，自主实现附属信息的前端渲染，放在iframe之外，该方案完全脱离Facebook播放器的适配逻辑，展示效果可控性最高。

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