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

16
src/less/plyr.less
View File

@ -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
// --------------------------------------------------------------

1
src/less/variables.less
View File

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

15
src/scss/plyr.scss
View File

@ -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
// --------------------------------------------------------------

1
src/scss/variables.scss
View File

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