From 145aba6aead63e6c4920662e27f65af2b8be4dc5 Mon Sep 17 00:00:00 2001
From: Alex Barstow <abarstow@brightcove.com>
Date: Fri, 15 Apr 2022 12:55:27 -0400
Subject: [PATCH] fix: Audio only mode styling conflicts with fluid mode
 (#7724)

* css changes

* make audio only mode player responsive in fluid mode
---
 src/css/components/_layout.scss | 17 ++++++++++++-----
 src/js/player.js                |  2 +-
 src/js/video.js                 |  2 +-
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/css/components/_layout.scss b/src/css/components/_layout.scss
index 3b2c44e9fb..146023c31d 100644
--- 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
index 67d5052c5e..84fe589ca7 100644
--- 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
index dec6ccf2ce..87c58cf8d7 100644
--- 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%
       }
     `);