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 {
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%;
}

2
src/js/player.js
View File

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

2
src/js/video.js
View File

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