javascript - How to make Facebook live video embed 16:9? -


i'm having trouble embed live fb video because it's transforms 16:9 video 1:1 format , make black lines @ top , @ bottom. there video section on users website have 16:9 proportions. user can change videos via cms pasting iframe tag. when user add simple facebook embed video fit perfect!... when user trying add live video breaks because of square proportion. example how shows live video on fb - 16:9, needed
fb live example

embed iframe.... fb live example
unfortunately changing width , height of embed iframe tag did not resolved problem - cut bottom of video. so..any ideas how prevent live fb video transforms 1:1 , stay 16:9 original??

had similar issue basic facebook video embed. not sure if related question in here might bottom of issue.

my video 4:3 ratio , wanted responsive. had add attributes iframe such, width 400 , height 300 4:3 video. remember specify &height=300 in video href.

<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> 

the important thing remember in css ensure padding-bottom matches video ratio. in case 75% have 4:3 ratio.

full code make responsive:

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

Comments

Popular posts from this blog

amazon web services - S3 Pre-signed POST validate file type? -

c# - Check Keyboard Input Winforms -