如何让Facebook直播视频嵌入16:9？

Question

我在嵌入实时FB视频时遇到了问题，因为它将16:9的视频转换为1:1的格式，并在顶部和底部生成黑线。在用户网站上有一个视频部分，比例为16:9。用户只需粘贴iframe标签即可通过CMS更改视频。所以当用户添加简单的Facebook嵌入视频时，它非常适合！但当用户试图添加一些现场视频时，它只是打破了所有的东西，因为方形比例。这是它如何在FB - 16:9上显示实时视频的示例，就像需要的那样

但是然后嵌入的iframe...

不幸的是，改变embed IFRAME标签的宽度和高度并没有解决这个问题--它只是切断了视频的底部。So..any想法如何防止直播FB视频转换为1:1并保持16:9的原始值？？

Answer 1

有类似的问题，但只有一个基本的Facebook视频嵌入。不确定这是否与问题完全相关，但这里的一些内容可能有助于了解您的问题的真相。

我的视频是4:3的比例，我希望它是响应性的。我必须在iframe中添加属性，比如4:3视频的宽度400和高度300。记住在视频href中指定&height=300。

<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fthortful%2Fvideos%2F1244848022205952%2F&show_text=0&width=400&height=300" width="400" height="300" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>

重要的是要记住，在你的CSS是要确保你的填充底部匹配你的视频比例。在这种情况下，75%，因为我有4:3的比例。

使其响应的完整代码：

<div class="responsive-video">
   <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fthortful%2Fvideos%2F1244848022205952%2F&show_text=0&width=400&height=300" width="400" height="300" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
</div>

.responsive-video {
   position: relative;
   padding-bottom: 75%;
   height: 0;
}
.responsive-video iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}