fix: fullscreen issues with Vimeo (fixes #2175)

This commit is contained in:
Sam Potts
2021-05-12 23:31:01 +10:00
parent b050fde276
commit 5fd4391cd9
4 changed files with 67 additions and 72 deletions

View File

@ -59,17 +59,6 @@
height: 100%;
}
.plyr__video-wrapper {
height: 100%;
position: static;
}
// Vimeo requires some different styling
&.plyr--vimeo .plyr__video-wrapper {
height: 0;
position: relative;
}
// Display correct icon
.plyr__control .icon--exit-fullscreen {
display: block;

View File

@ -14,7 +14,6 @@
.plyr__video-wrapper {
background: var(--plyr-video-background, $plyr-video-background);
height: 100%;
margin: auto;
overflow: hidden;
position: relative;
@ -45,17 +44,13 @@ $embed-padding: ((100 / 16) * 9);
width: 100%;
}
// If the full custom UI is supported
.plyr--full-ui .plyr__video-embed {
// 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));
// Only used for Vimeo
> .plyr__video-embed__container {
padding-bottom: to-percentage($height);
position: relative;
transform: translateY(-$offset);
}
padding-bottom: to-percentage($height);
position: relative;
transform: translateY(-$offset);
}
// Controls container