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

Fix for caption size (fixes #390), Fix for Firefox Dev (fixes #392)

Browse Source
This commit is contained in:
Sam Potts 2016-10-23 13:35:49 +11:00
parent f9a184800b
commit bec10e7836
5 changed files with 24 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

14
src/less/plyr.less
View File

@ -173,9 +173,6 @@
position: relative; position: relative;
background: #000; background: #000;
border-radius: inherit; border-radius: inherit;
// Cleaner radius, also forces iframe radius
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
} }
// Container for embeds // Container for embeds
@ -184,6 +181,9 @@
height: 0; height: 0;
overflow: hidden; overflow: hidden;
// Require z-index to force border-radius
z-index: 0;
iframe { iframe {
position: absolute; position: absolute;
top: 0; top: 0;
@ -192,6 +192,7 @@
height: 100%; height: 100%;
border: 0; border: 0;
user-select: none; user-select: none;
z-index: 1;
} }
// Vimeo hack // Vimeo hack
@ -244,11 +245,14 @@
.plyr--captions-active .plyr__captions { .plyr--captions-active .plyr__captions {
display: block; display: block;
} }
.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 { .plyr--fullscreen-active .plyr__captions {
font-size: @plyr-font-size-captions-large; font-size: @plyr-font-size-captions-large;
} }
.plyr--hide-controls .plyr__captions {
transform: translateY(-(@plyr-control-spacing * 1.5));
} }
// Controls // Controls

1
src/less/variables.less
View File

@ -69,3 +69,4 @@
// Breakpoints // Breakpoints
@plyr-bp-screen-sm: 480px; @plyr-bp-screen-sm: 480px;
@plyr-bp-screen-md: 768px; @plyr-bp-screen-md: 768px;
@plyr-bp-screen-lg: 1024px;

13
src/scss/plyr.scss
View File

@ -172,9 +172,6 @@
position: relative; position: relative;
background: #000; background: #000;
border-radius: inherit; border-radius: inherit;
// Cleaner radius, also forces iframe radius
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
} }
// Container for embeds // Container for embeds
@ -184,6 +181,9 @@
overflow: hidden; overflow: hidden;
border-radius: inherit; border-radius: inherit;
// Require z-index to force border-radius
z-index: 0;
iframe { iframe {
position: absolute; position: absolute;
top: 0; top: 0;
@ -244,11 +244,14 @@
.plyr--captions-active .plyr__captions { .plyr--captions-active .plyr__captions {
display: block; display: block;
} }
.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 { .plyr--fullscreen-active .plyr__captions {
font-size: $plyr-font-size-captions-large; font-size: $plyr-font-size-captions-large;
} }
.plyr--hide-controls .plyr__captions {
transform: translateY(-($plyr-control-spacing * 2));
} }
// Controls // Controls

1
src/scss/variables.scss
View File

@ -70,3 +70,4 @@ $plyr-range-selected-bg: $plyr-color-main !default;
// Breakpoints // Breakpoints
$plyr-bp-screen-sm: 480px !default; $plyr-bp-screen-sm: 480px !default;
$plyr-bp-screen-md: 768px !default; $plyr-bp-screen-md: 768px !default;
$plyr-bp-screen-lg: 1024px !default;