Facebook videos not fitting properly in the container

[sagarchoudhary96]

Current Behavior

While trying to play Facebook Video, in a modal using react-player, it's not taking the given height of the modal and sometimes based on video either overflows or is of less width resulting in non-uniform layout. The issue i think its because of the aspect-ratio maybe in which the Facebook returns iframe.

Rest all videos from youtube, Vimeo seems to be fitting properly taking the given height and width.

Expected Behavior

I want the video to fit in the given space in modal similar to how it happens on the facebook page.

Steps to Reproduce

I have created the sandbox for it where it can be tested.

1. change the value of url in this object in NewVideoModal.js file

const defaultOptions = {
  url: testUrls[1],
  playing: true,
  controls: true,
  light: true
};

for 1st URL i.e youtube , it works fine, i need it to be similar for facebook links also.
for 2nd and 3rd URL from the testUrls array, you can see the issue. for 2nd URL the video overflow and controls are hidden. for 3rd URL the video is of lesser height than the container so extra padding at bottom can be seen.

Environment

• URL attempting to play: "https://www.facebook.com/airmeetcom/videos/3338508372933324/",
  "https://www.facebook.com/airmeetcom/videos/565343767721490/"
• Browser: Chrome 86.0.4240.183
• Operating system: Mac OS big SUR 11.0.1
• codesandbox: https://codesandbox.io/s/react-player-modal-fz4sb

[keslert]

I'm also experiencing this issue. Here's another video that's problematic: https://www.facebook.com/JenniferGarner/videos/537638620452807/

[cookpete]

Looks like unless you pass in a pixel value to data-width and data-height of the Facebook embed, the player will expand beyond the height of the wrapper to match the aspect ratio of the video.

I'm going to add config.facebook.attributes so you can do something like

config={{
  facebook: {
    attributes: {
      'data-width': '320px',
      'data-height': '180px'
    }
  }
}}

to pin the size of the video when it is loaded by the FB SDK. I think using these attributes means players can no longer be responsive, but it's the best we can do.

[sagarchoudhary96]

Thanks @cookpete for this fix. will test it out once.

[MikeyS2002]

Is there something to make it responsive I've tried 'data-width': '100%', 'data-height': '100%' but that doesn't seem to work. Anyone an idea?

[dmrickey]

How does the linked commit resolve this?