From 9a45f05d8fea7b51570cbf39d2aab129175aab05 Mon Sep 17 00:00:00 2001
From: Alex Barstow <abarstow@brightcove.com>
Date: Wed, 30 Mar 2022 14:29:58 -0400
Subject: [PATCH 1/2] css changes

---
 src/css/components/_layout.scss | 20 ++++++++++----------
 src/js/player.js                |  2 +-
 src/js/video.js                 |  2 +-
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/css/components/_layout.scss b/src/css/components/_layout.scss
index 3b2c44e9fb..bab15ffe09 100644
--- a/src/css/components/_layout.scss
+++ b/src/css/components/_layout.scss
@@ -70,33 +70,33 @@
 
 // Not including a default AR in vjs-fluid because it would override
 // the user set AR injected into the header.
-.video-js.vjs-fluid,
-.video-js.vjs-16-9,
-.video-js.vjs-4-3,
-.video-js.vjs-9-16,
-.video-js.vjs-1-1 {
+.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) {
   width: 100%;
   max-width: 100%;
   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%
       }
     `);

From 430fe4bccad72095e002689f3bc6a7e7de9e7e87 Mon Sep 17 00:00:00 2001
From: Alex Barstow <abarstow@brightcove.com>
Date: Wed, 13 Apr 2022 17:39:55 -0400
Subject: [PATCH 2/2] make audio only mode player responsive in fluid mode

---
 src/css/components/_layout.scss | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/css/components/_layout.scss b/src/css/components/_layout.scss
index bab15ffe09..146023c31d 100644
--- a/src/css/components/_layout.scss
+++ b/src/css/components/_layout.scss
@@ -70,13 +70,20 @@
 
 // Not including a default AR in vjs-fluid because it would override
 // the user set AR injected into the header.
+.video-js.vjs-fluid,
+.video-js.vjs-16-9,
+.video-js.vjs-4-3,
+.video-js.vjs-9-16,
+.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) {
-  width: 100%;
-  max-width: 100%;
   height: 0;
 }