Facebook Vertical Video Over Bounds

[sjstark]

Current Behavior

Vertical Facebook videos will overflow out of the component, regardless of styling that I've tried.

Expected Behavior

Expect to be able to modify height and have control over this when the video used is a vertical video from facebook. My temporary solution is to make the player component's height={'fit-content'} , but really I'd like to be able to set max heights for this.

Steps to Reproduce

1. Make a video player (can be responsive or not, even the demo at cookpete.com/react-player will do this.
2. Add a vertical facebook video
3. Witness the overflow

Environment

• URL attempting to play: https://www.facebook.com/108824017345866/videos/909833469821723
• Browser: Chrome
• Operating system: Windows and Mac
• jsFiddle example: (I'm sorry, but at this point I can't produce an example, just came across it while debugging a project on a deadline! And thought I'd drop a note on the matter :) If I have time afterward I'll put together a jsFiddle, however, as I mentioned, this behavior occurs on the demo site for the component. https://cookpete.com/react-player/

Other Information

Thanks in advance! And also thanks for making this component in the first place!

[sjstark]

Also wanted to point out that while this seems to be similar to #895 , I think it's actually different. I did see the note there about facebook's embedded API potentially being the source of the issue.

Also wanted to point out that the often suggested "responsive-player" section does not solve this bug. See below images with the exact responsive player formatting applied.

Facebook Vertical Video:

Youtube Vertical Video:

Horizontal Facebook Video:

[cookpete]

Also wanted to point out that the often suggested "responsive-player" section does not solve this bug. See below images with the exact responsive player formatting applied.

The responsive player only works when you know the aspect ratio of the video. If you are using the responsive player implementation but for horizontal videos then you're gonna have problems when playing a vertical video.

It seems like the Facebook player just does not care about the height that you pass in.

[wenzie12]

I had similar issue and adding height='fit-content' didn't help. What I did to fix this (for facebook videos that are on portrait) is by adding config props.

<ReactPlayer
   className='react-player'
   url='.../url_here'
   width='100%'
   height='100%'
   config={{
       facebook: {
           attributes: {
              // add css to control video styling
              height: '200px', 
              padding: '0',
              backgroundColor: '#000', 
          }
       }
   }}
 />

[yuriibut]

This works for me. But important thing: width & height should be integer. Facebook ignores floating numbers.

  const width = 320;
  const height = 180;

 <ReactPlayer
      width={width}
      height={height}
      config={{
        facebook: {
          attributes: {
            'data-width': width,
            'data-height': height,
          },
        },
      }}
    />