diff options
Diffstat (limited to 'src/sass/types/video.scss')
| -rw-r--r-- | src/sass/types/video.scss | 8 |
1 files changed, 6 insertions, 2 deletions
diff --git a/src/sass/types/video.scss b/src/sass/types/video.scss index e0de7acc..747a2eb7 100644 --- a/src/sass/types/video.scss +++ b/src/sass/types/video.scss @@ -2,6 +2,8 @@ // Video styles // -------------------------------------------------------------- +@use 'sass:math'; + // Container .plyr--video { background: var(--plyr-video-background, $plyr-video-background); @@ -14,6 +16,7 @@ .plyr__video-wrapper { background: var(--plyr-video-background, $plyr-video-background); + height: 100%; margin: auto; overflow: hidden; position: relative; @@ -21,7 +24,7 @@ } // 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-wrapper--fixed-ratio { @@ -47,7 +50,8 @@ $embed-padding: ((100 / 16) * 9); // For Vimeo, if the full custom UI is supported .plyr--full-ui .plyr__video-embed > .plyr__video-embed__container { $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); position: relative; transform: translateY(-$offset); |