fix: Audio only mode styling conflicts with fluid mode (#7724)

* css changes * make audio only mode player responsive in fluid mode
videojs · Apr 15, 2022 · 145aba6 · 145aba6
1 parent 9cec1de
commit 145aba6
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
diff --git a/src/css/components/_layout.scss b/src/css/components/_layout.scss
@@ -77,26 +77,33 @@
 .video-js.vjs-1-1 {
   width: 100%;
   max-width: 100%;
+}
+
+.video-js.vjs-fluid:not(.vjs-audio-only-mode),
+.video-js.vjs-16-9:not(.vjs-audio-only-mode),
+.video-js.vjs-4-3:not(.vjs-audio-only-mode),
+.video-js.vjs-9-16:not(.vjs-audio-only-mode),
+.video-js.vjs-1-1:not(.vjs-audio-only-mode) {
   height: 0;
 }
 
-.video-js.vjs-16-9 {
+.video-js.vjs-16-9:not(.vjs-audio-only-mode) {
   @include apply-aspect-ratio(16, 9);
 }
 
-.video-js.vjs-4-3 {
+.video-js.vjs-4-3:not(.vjs-audio-only-mode) {
   @include apply-aspect-ratio(4, 3);
 }
 
-.video-js.vjs-9-16 {
+.video-js.vjs-9-16:not(.vjs-audio-only-mode) {
   @include apply-aspect-ratio(9, 16);
 }
 
-.video-js.vjs-1-1 {
+.video-js.vjs-1-1:not(.vjs-audio-only-mode) {
   @include apply-aspect-ratio(1, 1);
 }
 
-.video-js.vjs-fill {
+.video-js.vjs-fill:not(.vjs-audio-only-mode) {
   width: 100%;
   height: 100%;
 }

diff --git a/src/js/player.js b/src/js/player.js
@@ -1112,7 +1112,7 @@ class Player extends Component {
         height: ${height}px;
       }
 
-      .${idClass}.vjs-fluid {
+      .${idClass}.vjs-fluid:not(.vjs-audio-only-mode) {
         padding-top: ${ratioMultiplier * 100}%;
       }
     `);

diff --git a/src/js/video.js b/src/js/video.js
@@ -207,7 +207,7 @@ if (window.VIDEOJS_NO_DYNAMIC_STYLE !== true && Dom.isReal()) {
         height: 150px;
       }
 
-      .vjs-fluid {
+      .vjs-fluid:not(.vjs-audio-only-mode) {
         padding-top: 56.25%
       }
     `);