javascript - 如何让Facebook直播视频嵌入16 :9?

Question

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


但是然后嵌入 iframe....
不幸的是，改变嵌入 IFRAME 标签的宽度和高度并没有解决问题——它只是切断了视频的底部。那么..有什么想法可以防止 Live 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%;
}