diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/less/plyr.less | 16 | ||||
| -rw-r--r-- | src/less/variables.less | 3 | ||||
| -rw-r--r-- | src/scss/plyr.scss | 15 | ||||
| -rw-r--r-- | src/scss/variables.scss | 3 |
4 files changed, 23 insertions, 14 deletions
diff --git a/src/less/plyr.less b/src/less/plyr.less index f70d135c..143e7f06 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -173,9 +173,6 @@ position: relative; background: #000; border-radius: inherit; - - // Cleaner radius, also forces iframe radius - -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); } // Container for embeds @@ -184,6 +181,9 @@ height: 0; overflow: hidden; + // Require z-index to force border-radius + z-index: 0; + iframe { position: absolute; top: 0; @@ -192,6 +192,7 @@ height: 100%; border: 0; user-select: none; + z-index: 1; } // Vimeo hack @@ -244,12 +245,15 @@ .plyr--captions-active .plyr__captions { display: block; } -.plyr--fullscreen-active .plyr__captions { - font-size: @plyr-font-size-captions-large; -} .plyr--hide-controls .plyr__captions { transform: translateY(-(@plyr-control-spacing * 1.5)); } +// Large captions in full screen on larger screens +@media (min-width: @plyr-bp-screen-lg) { + .plyr--fullscreen-active .plyr__captions { + font-size: @plyr-font-size-captions-large; + } +} // Controls // -------------------------------------------------------------- diff --git a/src/less/variables.less b/src/less/variables.less index fc9e895a..807d0854 100644 --- a/src/less/variables.less +++ b/src/less/variables.less @@ -68,4 +68,5 @@ // Breakpoints @plyr-bp-screen-sm: 480px; -@plyr-bp-screen-md: 768px;
\ No newline at end of file +@plyr-bp-screen-md: 768px; +@plyr-bp-screen-lg: 1024px;
\ No newline at end of file diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss index 47917364..70518591 100644 --- a/src/scss/plyr.scss +++ b/src/scss/plyr.scss @@ -172,9 +172,6 @@ position: relative; background: #000; border-radius: inherit; - - // Cleaner radius, also forces iframe radius - -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); } // Container for embeds @@ -184,6 +181,9 @@ overflow: hidden; border-radius: inherit; + // Require z-index to force border-radius + z-index: 0; + iframe { position: absolute; top: 0; @@ -244,12 +244,15 @@ .plyr--captions-active .plyr__captions { display: block; } -.plyr--fullscreen-active .plyr__captions { - font-size: $plyr-font-size-captions-large; -} .plyr--hide-controls .plyr__captions { transform: translateY(-($plyr-control-spacing * 2)); } +// Large captions in full screen on larger screens +@media (min-width: $plyr-bp-screen-lg) { + .plyr--fullscreen-active .plyr__captions { + font-size: $plyr-font-size-captions-large; + } +} // Controls // -------------------------------------------------------------- diff --git a/src/scss/variables.scss b/src/scss/variables.scss index 0bd31603..da75f11a 100644 --- a/src/scss/variables.scss +++ b/src/scss/variables.scss @@ -69,4 +69,5 @@ $plyr-range-selected-bg: $plyr-color-main !default; // Breakpoints $plyr-bp-screen-sm: 480px !default; -$plyr-bp-screen-md: 768px !default;
\ No newline at end of file +$plyr-bp-screen-md: 768px !default; +$plyr-bp-screen-lg: 1024px !default;
\ No newline at end of file |