Video.js: Video Full Screen keeps video original size

[burnhamrobertp]

Most videos seem to be fine but others, such as this one:

http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_60fps_normal.mp4

Do not engage in full screen and simply stays in its original size with the rest of the screen having a black background. Video controls are properly positioned, but the actual video doesn't increase in size.

[gkatsev]

Seems to work fine for me. Can you put up a reduced test case showcasing the issue?

[bradjones1]

I am running into this using a Big Buck Bunny trailer test video, though I'm playing it with the contrib HLS extension. I will try to put up a test example soon.

[misteroneill]

Those audio tracks errors are odd/suspicious. What version of video.js is that?

Also, is this browser or OS-specific?

[bradjones1]

Those audio tracks errors are odd/suspicious. What version of video.js is that?

Version 5.8.8, off the CDN. I'm also using v. 3.16.13 of the HLS library, if that might make a difference.

Also, is this browser or OS-specific?

Same results on both Firefox and Chromium on Linux, haven't tried another OS.

[misteroneill]

@bradjones1 I put together a reduced test case and fullscreen seems fine in all browsers, but I'm on Mac OS X. It could be Linux-related.

The audioTracks error looks like a consequence of incompatible video.js and videojs-contrib-hls versions. videojs-contrib-hls v3.16.x expects video.js v5.10.1 or higher.

My example uses v5.10.8 and v3.16.14 and I don't see that error.

[bradjones1]

@misteroneill Thanks... I missed the dependency issue since it's not in the README, just the package.js. I will try this combination and follow up. Appreciate the test.

Is the 4.x branch of HLS still unstable at this point?

[bradjones1]

After testing with this a bit more, I think the culprit here was width/height CSS being applied to the video element itself, which when removed allowed the video to expand to fit the full screen.

For anyone else finding this via a Drupal integration, see this issue.

[svandecappelle]

This CSS could help you.
It caused by the width / height into DOM attributes are the most important attributes. Forcing them into CSS to important has solved mine.

.video-js .vjs-tech {
  width: 100% !important;
  height: 100% !important;
}

[gkatsev]

I think this has been fixed and answered, so, closing.