Home > Net >  Embed facebook video full width
Embed facebook video full width

Time:07-01

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&amp;href=https://www.facebook.com/TVcarcassonne/videos/1048478559377806/&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>

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.

  • Related