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% } `);