嵌入facebook视频全宽

Question

我尝试了很多解决办法，但都没有成功。我如何嵌入完全宽度的facebook视频？

我使用以下代码：

.videoWrapper{
overflow: hidden;
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
height: 0;
}

.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

以及：

<div class="col-lg-12 videoWrapper px-0" style="border:1px solid #000;">
<iframe loading="lazy" src="https://www.facebook.com/plugins/video.php?height=314&amp;href=https%3A%2F%2Fwww.facebook.com%2FTVcarcassonne%2Fvideos%2F1048478559377806%2F&amp;show_text=false&amp;width=560&amp;t=0&amp;autoplay=true" style="border:none;overflow:hidden" scrolling="no" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" width="560" height="314" frameborder="0"></iframe>
  </div>

它适用于YoutubeVideo，但不适用于facebook视频。您可以在https://dev.dibona.fr/tv/上看到问题。

谢谢你的帮助！

Answer 1

一周后我创建了解决方案！

<script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>
   <div class="fb-video"
   data-href="http://www.facebook.com/XXXXXXX/videos/XXXXXX"
   data-width="auto"
   data-show-captions="false">
   </div>

像CBroe说的那样，把“数据宽度”放到汽车上。