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

Question

我在嵌入直播FB视频方面遇到了麻烦，因为它将16：9视频转换为1：1格式，并在顶部和底部制作黑线。用户网站上有一个视频部分，比例为16：9。用户只需粘贴iframe标记即可通过CMS更改视频。因此，当用户添加简单的Facebook嵌入视频时，它非常适合！...但是当用户试图添加一些实况视频时，它会因为方形比例而打破一切。 这是如何在FB-16：9上显示实时视频的示例，就像需要一样

但随后嵌入iframe ......
不幸的是，嵌入IFRAME标签的宽度和高度的变化并没有解决问题 - 它只是削减了视频的底部。 所以..任何想法如何防止实时FB视频转换为1：1并保持16：9像原始??

Answer 1

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

我的视频比例是4：3，我希望它能够做出回应。我不得不将属性添加到iframe中，例如4：3视频的宽度400和高度300。请务必在视频广告中指定＆amp; 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%;
}