[Enhancement] Video cover entire player area (ie. No black bars)

[stranger-danger-zamu]

Is your enhancement request related to a problem? Please describe.
Videos have black bars instead of scaling to cover whatever space they need to fit into the browser window.

Describe the solution you'd like
Changing the /assests/css/default.css file to make videos cover the space and have no black bars.
Specifically the changes needed to achieve this are:

diff --git a/assets/css/default.css b/assets/css/default.css
index 793295d..8c70960 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -237,11 +237,11 @@ input[type="search"]::-webkit-search-cancel-button {
 
 @media only screen and (max-aspect-ratio: 16/9) {
   .player-dimensions.vjs-fluid {
-    padding-top: 46.86% !important;
+/*     padding-top: 46.86% !important; */
   }
 
   #player-container {
-    padding-bottom: 46.86% !important;
+/*     padding-bottom: 46.86% !important; */
   }
 }
 
@@ -453,7 +453,7 @@ span > select {
 }
 
 .player-dimensions.vjs-fluid {
-  padding-top: 82vh;
+/*   padding-top: 82vh; */
 }
 
 video.video-js {
@@ -463,8 +463,8 @@ video.video-js {
 
 #player-container {
   position: relative;
-  padding-bottom: 82vh;
-  height: 0;
+/*   padding-bottom: 82vh; */
+/*   height: 0; */
 }
 
 .pure-control-group label {
@@ -630,4 +630,4 @@ body.dark-theme {
 
 #filters {
   display: none;
-}
\ No newline at end of file
+}

Describe alternatives you've considered
Something like a user setting that allows the addition of custom user CSS that gets evaluated last.

Additional context
I just commented out the CSS blocks necessary and haven't done thorough testing to see if it breaks any other features. I did however use Google Chrome's device toolbar to emulate all the devices and checked for any weirdness. From what I can tell it worked perfectly fine.

Also didn't submit this as a PR since I wasn't sure if this was done for some reason.

[TheFrenchGhosty]

Can you share some screenshot of the results? If it works fine you should definitely open a PR.

[stranger-danger-zamu]

Black Bars:

No Black Bars:

Some videos still have issues (eg. LTT uses a strange aspect ratio), but that's also just removing more padding and height CSS definitions and then they have no black bars. A lot of the issues seem to originate from the .vjs-* video classes, so it might be a upstream issue more than a this project issue.

I don't really have the time to delve into this more to do a full pull request if it's based on an upstream CSS dependency.

[TheFrenchGhosty]

Can you open a PR as is? I might be able to do some more testing

[SamantazFox]

Wouldn't it be better to initially set the player size (as what youtube does) according to the video's dimensions?

Because just cropping out some parts of the video with CSS seems to me a bit brutal, and may remove important infos (especially on e-learning videos).

[obscurerev]

I personally like the black bars if anything else.

[stranger-danger-zamu]

cropping out some parts of the video

No one is talking about cropping out any part of the video. These are blank spaces because the video's aspect ratio is incorrect.

[stranger-danger-zamu]

Also, this does seem to be a upstream bug that they instead have users "fix" through configuration instead of having the library properly utilize the video data.

• How to scale video to fill the container videojs/video.js#3431
• Video sizing of width and height to "auto" creates very odd sizing behavior. Black bars. videojs/video.js#2841
• How to remove side bars on video? videojs/video.js#6604

[syeopite]

Still an issue