web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2024-12-04 10:34:51 +02:00
Code Releases Activity

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

Browse Source 
* css changes

* make audio only mode player responsive in fluid mode
This commit is contained in:
Alex Barstow 2022-04-15 12:55:27 -04:00 committed by GitHub
parent 9cec1de915
commit 145aba6aea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/css/components/_layout.scss
View File

@ -77,26 +77,33 @@
.video-js.vjs-1-1 { .video-js.vjs-1-1 {
width: 100%; width: 100%;
max-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; height: 0;
} }
.video-js.vjs-16-9 { .video-js.vjs-16-9:not(.vjs-audio-only-mode) {
@include apply-aspect-ratio(16, 9); @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); @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); @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); @include apply-aspect-ratio(1, 1);
} }
.video-js.vjs-fill { .video-js.vjs-fill:not(.vjs-audio-only-mode) {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }

2
src/js/player.js
View File

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

2
src/js/video.js
View File

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