[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.

• https://github.com/videojs/video.js/issues/3431
• https://github.com/videojs/video.js/issues/2841
• https://github.com/videojs/video.js/issues/6604

[github-actions[bot]]

This issue has been automatically marked as stale and will be closed in 30 days because it has not had recent activity and is much likely outdated. If you think this issue is still relevant and applicable, you just have to post a comment and it will be unmarked.

[syeopite]

Still an issue