I tried lot of solution without success. How could I embed facebook video with full width ?
I use this code :
.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%;
}
and :
<div style="border:1px solid #000;">
<iframe loading="lazy" src="https://www.facebook.com/plugins/video.php?height=314&href=https://www.facebook.com/TVcarcassonne/videos/1048478559377806/&show_text=false&width=560&t=0&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>
It works for YoutubeVideo but not for facebook video. You could see the problem on https://dev.dibona.fr/tv/.
Thank you for your help !
CodePudding user response:
I founded solution after 1 week !
<script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>
<div
data-href="http://www.facebook.com/XXXXXXX/videos/XXXXXX"
data-width="auto"
data-show-captions="false">
</div>
Put "data-width" to auto like CBroe said.