ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update video.scss (#2296)

Browse Source
This commit is contained in:
Roland 2021-08-24 14:30:13 +02:00 committed by GitHub
parent b7dbdc133e
commit 784f36921b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/sass/types/video.scss
View File

@ -2,6 +2,8 @@
// Video styles // Video styles
// -------------------------------------------------------------- // --------------------------------------------------------------
@use 'sass:math';
// Container // Container
.plyr--video { .plyr--video {
background: var(--plyr-video-background, $plyr-video-background); background: var(--plyr-video-background, $plyr-video-background);
@ -21,7 +23,7 @@
} }
// Default to 16:9 ratio but this is set by JavaScript based on config // Default to 16:9 ratio but this is set by JavaScript based on config
$embed-padding: ((100 / 16) * 9); $embed-padding: (math.div(100, 16) * 9);
.plyr__video-embed, .plyr__video-embed,
.plyr__video-wrapper--fixed-ratio { .plyr__video-wrapper--fixed-ratio {
@ -47,7 +49,7 @@ $embed-padding: ((100 / 16) * 9);
// For Vimeo, if the full custom UI is supported // For Vimeo, if the full custom UI is supported
.plyr--full-ui .plyr__video-embed > .plyr__video-embed__container { .plyr--full-ui .plyr__video-embed > .plyr__video-embed__container {
$height: 240; $height: 240;
$offset: to-percentage(($height - $embed-padding) / ($height / 50)); $offset: to-percentage(math.div($height - $embed-padding, math.div($height, 50)));
padding-bottom: to-percentage($height); padding-bottom: to-percentage($height);
position: relative; position: relative;
transform: translateY(-$offset); transform: translateY(-$offset);