fluid aspect ratio incorrect on android ( chrome )

Description

Briefly describe the issue. The recorder is too tall on android in chrome in portrait orientation ( possibly others )

Steps to reproduce

set fluid: true, load on android in chrome

Results

Expected

The aspect ratio to match what I see in chrome on the desktop.

Actual

I see the recorder as much taller in chrome on android.

Error output

If there are any errors at all, please include them here.

Additional Information

Please include any additional information necessary here. Including the following:

When I dig into the dev tools on android I see:

.reportVideo-dimensions.vjs-fluid {
padding-top: 177.77777777777777%
}

on the desktop the padding-top is correct at 56.25%.

Here are the settings:

{
              controls: true,
              autoplay: true,
              fluid: true,
              controlBar: {
                volumePanel: false
              },
              plugins: {
                record: {
                  debug: true,
                  audio: true,
                  video: {
                    // video constraints: set resolution of camera
                    mandatory: {
                      minWidth: 1280,
                      minHeight: 720
                    }
                  },
                  maxLength: 120,
                  videoMimeType: 'video/webm;codecs=H264',
                  // dimensions of captured video frames
                  frameWidth: 1280,
                  frameHeight: 720
                }
              }
            }

versions

videojs

what version of videojs does this occur with? 7.0.0

browsers

what browser are affected? chrome

OSes

what platforms (operating systems and devices) are affected? android

[smakinson]

I’ll give that aspectRatio property a try, it looks like it does get used for determining the padding-top.

[thijstriemstra]

@smakinson good to see you’re making progress. If you have any fixes to contribute, feel free to open a pull request and I’ll review it asap.