如何使Facebook直播視頻嵌入16：9？

Question

我在嵌入實時FB視頻時遇到了麻煩，因為它將16：9視頻轉換為1：1格式並在頂部和底部形成黑線。 用戶網站上有一個視頻部分，其比例為16：9。 用戶只需粘貼iframe標簽即可通過CMS更改視頻。 因此，當用戶添加簡單的Facebook嵌入視頻時，它非常合適！...但是，當用戶嘗試添加一些LIVE視頻時，由於比例過大，它只會破壞所有內容。 這是示例如何在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中要記住的重要一點是確保底部填充與視頻比例匹配。 在這種情況下，我有7：4的比例是75％。

完整的代碼以使其響應：

<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%;
}