aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/js/plyr.js9
-rw-r--r--src/less/plyr.less179
-rw-r--r--src/sass/plyr.scss318
-rw-r--r--src/sprite/icon-captions-off.svg5
-rw-r--r--src/sprite/icon-captions-on.svg5
-rw-r--r--src/sprite/icon-enter-fullscreen.svg5
-rw-r--r--src/sprite/icon-exit-fullscreen.svg5
-rwxr-xr-xsrc/sprite/icon-fast-forward.svg4
-rw-r--r--src/sprite/icon-muted.svg6
-rw-r--r--src/sprite/icon-pause.svg5
-rwxr-xr-xsrc/sprite/icon-play.svg4
-rw-r--r--src/sprite/icon-restart.svg6
-rw-r--r--src/sprite/icon-rewind.svg5
-rwxr-xr-xsrc/sprite/icon-volume.svg4
14 files changed, 267 insertions, 293 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js
index b14f6964..dfcc12f0 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -1,6 +1,6 @@
// ==========================================================================
// Plyr
-// plyr.js v1.3.4
+// plyr.js v1.3.5
// https://github.com/selz/plyr
// License: The MIT License (MIT)
// ==========================================================================
@@ -1398,6 +1398,7 @@
player.embed.api('seekTo', targetTime);
}
+ // Trigger timeupdate
_triggerEvent(player.media, 'timeupdate');
if (paused) {
@@ -2047,6 +2048,10 @@
if (player.type == 'video' || player.type == 'audio') {
// Bail if no support
if (!player.supported.full) {
+ // Successful setup
+ player.init = true;
+
+ // Don't inject controls if no full support
return;
}
@@ -2197,4 +2202,4 @@
return players;
};
-}(this.plyr = this.plyr || {})); \ No newline at end of file
+}(this.plyr = this.plyr || {}));
diff --git a/src/less/plyr.less b/src/less/plyr.less
index d6f5f800..99742135 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -17,7 +17,11 @@
// Font sizes
@font-size-small: 14px;
@font-size-base: 16px;
-@font-size-large: ceil((@font-size-base * 1.5));
+
+// Captions
+@font-size-captions-base: ceil(@font-size-base * 1.25);
+@font-size-captions-medium: ceil(@font-size-base * 1.5);
+@font-size-captions-large: (@font-size-base * 2);
// Controls
@control-spacing: 10px;
@@ -28,7 +32,8 @@
// Tooltips
@tooltip-bg: @controls-bg;
-@tooltip-color: #fff;
+@tooltip-border-color: @off-white;
+@tooltip-color: @control-color;
@tooltip-padding: @control-spacing;
@tooltip-arrow-size: 5px;
@tooltip-radius: 3px;
@@ -197,26 +202,31 @@
bottom: 0;
left: 0;
width: 100%;
- padding: 20px;
- min-height: 2.5em;
+ padding: (@control-spacing * 2) (@control-spacing * 2) (@control-spacing * 3);
color: #fff;
- font-size: @font-size-base;
- font-weight: 600;
- text-shadow:
- -1px -1px 0 @gray,
- 1px -1px 0 @gray,
- -1px 1px 0 @gray,
- 1px 1px 0 @gray;
+ font-size: @font-size-captions-base;
text-align: center;
.font-smoothing();
+ span {
+ border-radius: 2px;
+ padding: 3px 10px;
+ background: rgba(0,0,0, .9);
+ }
+ span:empty {
+ display: none;
+ }
+
@media (min-width: @bp-captions-large) {
- font-size: @font-size-large;
+ font-size: @font-size-captions-medium;
}
}
&.captions-active &-captions {
display: block;
}
+ &.fullscreen-active &-captions {
+ font-size: @font-size-captions-large;
+ }
// Player controls
&-controls {
@@ -244,17 +254,20 @@
}
}
- input + label,
+ // Buttons
button {
display: inline-block;
vertical-align: middle;
margin: 0 2px;
padding: (@control-spacing / 2) @control-spacing;
-
- transition: background .3s ease, color .3s ease, opacity .3s ease;
+ overflow: hidden;
+ border: 0;
+ background: transparent;
border-radius: 3px;
cursor: pointer;
-
+ color: @control-color;
+ transition: background .3s ease, color .3s ease, opacity .3s ease;
+
svg {
width: 18px;
height: 18px;
@@ -262,41 +275,27 @@
fill: currentColor;
transition: fill .3s ease;
}
- }
- input + label,
- .inverted:checked + label {
- opacity: .5;
- }
- button,
- .inverted + label,
- input:checked + label {
- color: @control-color;
- opacity: 1;
- }
- button {
- border: 0;
- background: transparent;
- overflow: hidden;
- }
- // Specificity for overriding .inverted
- button:focus,
- button:hover,
- [type="checkbox"]:focus + label,
- [type="checkbox"] + label:hover {
- background: @control-bg-hover;
- color: @control-color-hover;
- opacity: 1;
- }
- button:focus,
- input:focus + label {
- outline: 0;
+ // Hover and tab focus
+ &.tab-focus,
+ &:hover {
+ background: @control-bg-hover;
+ color: @control-color-hover;
+ }
+ // Default focus
+ &:focus {
+ outline: 0;
+ }
}
+
+ // Hide toggle icons by default
.icon-exit-fullscreen,
.icon-muted,
.icon-captions-on {
display: none;
}
+
+ // Player time
.player-time {
display: inline-block;
vertical-align: middle;
@@ -317,7 +316,7 @@
// Add a slash in before
&::before {
- content: "\2044";
+ content: '\2044';
margin-right: @control-spacing;
}
}
@@ -325,7 +324,6 @@
// Tooltips
&-tooltip {
- visibility: hidden;
position: absolute;
z-index: 2;
bottom: 100%;
@@ -334,39 +332,38 @@
opacity: 0;
background: @tooltip-bg;
+ border: 1px solid @tooltip-border-color;
border-radius: @tooltip-radius;
color: @tooltip-color;
font-size: @font-size-small;
line-height: 1.5;
font-weight: 600;
- transform: translate(-50%, (@tooltip-padding * 3));
- transition: transform .2s .2s ease, opacity .2s .2s ease;
-
+ transform: translate(-50%, (@tooltip-padding * 3)) scale(0);
+ transform-origin: 50% 100%;
+ transition: transform .2s .1s ease, opacity .2s .1s ease;
+
+ // Arrow
&::after {
- content: "";
- display: block;
+ content: '';
position: absolute;
+ z-index: 1;
+ top: 100%;
left: 50%;
- bottom: -@tooltip-arrow-size;
- margin-left: -@tooltip-arrow-size;
- width: 0;
- height: 0;
- transition: inherit;
- border-style: solid;
- border-width: @tooltip-arrow-size @tooltip-arrow-size 0 @tooltip-arrow-size;
- border-color: @controls-bg transparent transparent;
+ display: block;
+ width: 10px;
+ height: 10px;
+ background: @tooltip-bg;
+ transform: translate(-50%, -50%) rotate(45deg) translateY(1px);
+ border: 1px solid @tooltip-border-color;
+ border-width: 0 1px 1px 0;
}
}
- label:hover .player-tooltip,
- input:focus + label .player-tooltip,
button:hover .player-tooltip,
- button:focus .player-tooltip {
- visibility: visible;
+ button.tab-focus:focus .player-tooltip {
opacity: 1;
- transform: translate(-50%, 0);
+ transform: translate(-50%, 0) scale(1);
}
- label:hover .player-tooltip,
button:hover .player-tooltip {
z-index: 3;
}
@@ -384,7 +381,7 @@
&-buffer[value],
&-played[value],
- &-seek[type=range] {
+ &-seek[type='range'] {
position: absolute;
left: 0;
top: 0;
@@ -424,7 +421,7 @@
// Seek control
// <input[type='range']> element
// Specificity is for bootstrap compatibility
- &-seek[type=range] {
+ &-seek[type='range'] {
z-index: 4;
cursor: pointer;
outline: 0;
@@ -499,7 +496,7 @@
// Volume control
// <input[type='range']> element
// Specificity is for bootstrap compatibility
- &-volume[type=range] {
+ &-volume[type='range'] {
display: inline-block;
vertical-align: middle;
-webkit-appearance: none;
@@ -565,7 +562,6 @@
// https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
&.ios &-volume,
&.ios [data-player='mute'],
- &.ios [data-player='mute'] + label,
&-audio.ios &-controls-right {
display: none;
}
@@ -604,16 +600,7 @@
.player-video-wrapper {
height: 100%;
width: 100%;
-
- .player-captions {
- top: auto;
- bottom: 90px;
-
- @media (min-width: @bp-control-split) {
- bottom: 60px;
- }
- }
- }
+ }
.player-controls {
position: absolute;
bottom: 0;
@@ -622,13 +609,29 @@
}
// Hide controls when playing in full screen
- &.fullscreen-hide-controls.playing .player-controls {
- transform: translateY(100%) translateY(@control-spacing / 2);
- transition: transform .3s .2s ease;
-
- &.hover {
+ &.fullscreen-hide-controls.playing {
+ .player-controls {
+ transform: translateY(100%) translateY(@control-spacing / 2);
+ transition: transform .3s .2s ease;
+ }
+ &.player-hover .player-controls {
transform: translateY(0);
}
+ .player-captions {
+ bottom: (@control-spacing / 2);
+ transition: bottom .3s .2s ease;
+ }
+ }
+
+ // Captions
+ .player-captions,
+ &.fullscreen-hide-controls.playing.player-hover .player-captions {
+ top: auto;
+ bottom: 90px;
+
+ @media (min-width: @bp-control-split) {
+ bottom: 60px;
+ }
}
}
@@ -645,15 +648,11 @@
// Some options are hidden by default
[data-player='captions'],
- [data-player='captions'] + label,
- [data-player='fullscreen'],
- [data-player='fullscreen'] + label {
+ [data-player='fullscreen'] {
display: none;
}
&.captions-enabled [data-player='captions'],
- &.captions-enabled [data-player='captions'] + label,
- &.fullscreen-enabled [data-player='fullscreen'],
- &.fullscreen-enabled [data-player='fullscreen'] + label {
+ &.fullscreen-enabled [data-player='fullscreen'] {
display: inline-block;
}
} \ No newline at end of file
diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss
index 767dc501..de386cd8 100644
--- a/src/sass/plyr.scss
+++ b/src/sass/plyr.scss
@@ -7,50 +7,66 @@
// -------------------------------
// Colors
-$blue: #3498DB !default;
-$gray-dark: #343F4A !default;
-$gray: #565D64 !default;
-$gray-light: #6B7D86 !default;
-$gray-lighter: #CBD0D3 !default;
-$off-white: #D6DADD !default;
+$blue: #3498DB !default;
+$gray-dark: #343F4A !default;
+$gray: #565D64 !default;
+$gray-light: #6B7D86 !default;
+$gray-lighter: #CBD0D3 !default;
+$off-white: #D6DADD !default;
// Font sizes
-$font-size-small: 14px !default;
-$font-size-base: 16px !default;
-$font-size-large: ceil(($font-size-base * 1.5)) !default;
+$font-size-small: 14px !default;
+$font-size-base: 16px !default;
+
+// Captions
+$font-size-captions-base: ceil($font-size-base * 1.25) !default;
+$font-size-captions-medium: ceil($font-size-base * 1.5) !default;
+$font-size-captions-large: ($font-size-base * 2) !default;
// Controls
-$control-spacing: 10px !default;
-$controls-bg: #fff !default;
-$control-bg-hover: @blue !default;
-.contrast-control-color($controls-bg);
-.contrast-control-color-hover($control-bg-hover);
+$control-spacing: 10px !default;
+$controls-bg: #fff !default;
+$control-bg-hover: $blue !default;
+$control-color: null !default;
+$control-color-hover: null !default;
+
+// Contrast
+@if lightness($controls-bg) >= 65% {
+ $control-color: $gray-light;
+} @else {
+ $control-color: $gray-lighter;
+}
+@if lightness($control-bg-hover) >= 65% {
+ $control-color-hover: $gray;
+} @else {
+ $control-color-hover: #fff;
+}
// Tooltips
-$tooltip-bg: $controls-bg !default;
-$tooltip-color: #fff !default;
-$tooltip-padding: $control-spacing !default;
-$tooltip-arrow-size: 5px !default;
-$tooltip-radius: 3px !default;
+$tooltip-bg: $controls-bg !default;
+$tooltip-color: $control-color !default;
+$tooltip-padding: $control-spacing !default;
+$tooltip-arrow-size: 5px !default;
+$tooltip-radius: 3px !default;
// Progress
-$progress-bg: rgba(red($gray), green($gray), blue($gray), .2) !default;
-$progress-playing-bg: $blue !default;
-$progress-buffered-bg: rgba(red($gray), green($gray), blue($gray), .25) !default;
-$progress-loading-size: 40px !default;
-$progress-loading-bg: rgba(0,0,0, .15) !default;
+$progress-bg: rgba(red($gray), green($gray), blue($gray), .2) !default;
+$progress-playing-bg: $blue !default;
+$progress-buffered-bg: rgba(red($gray), green($gray), blue($gray), .25) !default;
+$progress-loading-size: 40px !default;
+$progress-loading-bg: rgba(0,0,0, .15) !default;
// Volume
-$volume-track-height: 6px !default;
-$volume-track-bg: darken($controls-bg, 10%) !default;
-$volume-thumb-height: ($volume-track-height * 2) !default;
-$volume-thumb-width: ($volume-track-height * 2) !default;
-$volume-thumb-bg: $control-color !default;
-$volume-thumb-bg-focus: $control-bg-hover !default;
+$volume-track-height: 6px !default;
+$volume-track-bg: darken($controls-bg, 10%) !default;
+$volume-thumb-height: ($volume-track-height * 2) !default;
+$volume-thumb-width: ($volume-track-height * 2) !default;
+$volume-thumb-bg: $control-color !default;
+$volume-thumb-bg-focus: $control-bg-hover !default;
// Breakpoints
-$bp-control-split: 560px !default; // When controls split into left/right
-$bp-captions-large: 768px !default; // When captions jump to the larger font size
+$bp-control-split: 560px !default; // When controls split into left/right
+$bp-captions-large: 768px !default; // When captions jump to the larger font size
// Animation
// ---------------------------------------
@@ -59,46 +75,25 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
to { background-position: $progress-loading-size 0; }
}
-// Mixins
-// -------------------------------
-
-// Contrast
-@mixin contrast-control-color($color: "") {
- @if (lightness($color) >= 65%) {
- $control-color: $gray-light;
- }
- @else if(lightness(@color) < 65%) {
- $control-color: $gray-lighter;
- }
-}
-@mixin contrast-control-color-hover($color: "") {
- @if (lightness($color) >= 65%) {
- $control-color-hover: $gray;
- }
- @else if (lightness($color) < 65%) {
- $control-color-hover: #fff;
- }
-}
-
// Font smoothing
@mixin font-smoothing($mode: on)
{
- @if ($mode == 'on') {
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
- }
- @else if ($mode == 'off') {
- -moz-osx-font-smoothing: auto;
- -webkit-font-smoothing: subpixel-antialiased;
- }
+ @if ($mode == 'on') {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ }
+ @else if ($mode == 'off') {
+ -moz-osx-font-smoothing: auto;
+ -webkit-font-smoothing: subpixel-antialiased;
+ }
}
// Contain floats: nicolasgallagher.com/micro-clearfix-hack/
@mixin clearfix()
{
zoom: 1;
- &:before,
- &:after { content: ""; display: table; }
+ &:before,
+ &:after { content: ''; display: table; }
&:after { clear: both; }
}
// Tab focus styles
@@ -108,7 +103,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
outline-offset: 0;
}
-// Range mixins
+// <input type="range"> styling
@mixin volume-thumb()
{
height: $volume-thumb-height;
@@ -153,7 +148,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
// Styles
// -------------------------------
-// Base
+// Base
.player {
position: relative;
max-width: 100%;
@@ -164,8 +159,8 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
&,
*,
*::after,
- *::before {
- box-sizing: border-box;
+ *::before {
+ box-sizing: border-box;
}
// For video
@@ -179,6 +174,21 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
vertical-align: middle;
}
+ // For embeds
+ &-video-embed {
+ padding-bottom: 56.25%; /* 16:9 */
+ height: 0;
+
+ iframe {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ border: 0;
+ }
+ }
+
// Captions
&-captions {
display: none;
@@ -186,26 +196,31 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
bottom: 0;
left: 0;
width: 100%;
- padding: 20px;
- min-height: 2.5em;
+ padding: ($control-spacing * 2) ($control-spacing * 2) ($control-spacing * 3);
color: #fff;
- font-size: $font-size-base;
- font-weight: 600;
- text-shadow:
- -1px -1px 0 $gray,
- 1px -1px 0 $gray,
- -1px 1px 0 $gray,
- 1px 1px 0 $gray;
+ font-size: $font-size-captions-base;
text-align: center;
@include font-smoothing();
+ span {
+ border-radius: 2px;
+ padding: 3px 10px;
+ background: rgba(0,0,0, .9);
+ }
+ span:empty {
+ display: none;
+ }
+
@media (min-width: $bp-captions-large) {
- font-size: $font-size-large;
+ font-size: $font-size-captions-medium;
}
}
&.captions-active &-captions {
display: block;
}
+ &.fullscreen-active &-captions {
+ font-size: $font-size-captions-large;
+ }
// Player controls
&-controls {
@@ -232,18 +247,21 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
margin-top: 0;
}
}
-
- input + label,
+
+ // Buttons
button {
display: inline-block;
vertical-align: middle;
margin: 0 2px;
padding: ($control-spacing / 2) $control-spacing;
-
- background .3s ease, color .3s ease, opacity .3s ease;
+ overflow: hidden;
+ border: 0;
+ background: transparent;
border-radius: 3px;
cursor: pointer;
-
+ color: $control-color;
+ transition: background .3s ease, color .3s ease, opacity .3s ease;
+
svg {
width: 18px;
height: 18px;
@@ -251,41 +269,27 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
fill: currentColor;
transition: fill .3s ease;
}
+
+ // Hover and tab focus
+ &.tab-focus,
+ &:hover {
+ background: $control-bg-hover;
+ color: $control-color-hover;
+ }
+ // Default focus
+ &:focus {
+ outline: 0;
+ }
}
- input + label,
- .inverted:checked + label {
- opacity: .5;
- }
- button,
- .inverted + label,
- input:checked + label {
- color: $control-color;
- opacity: 1;
- }
- button {
- border: 0;
- background: transparent;
- overflow: hidden;
- }
-
- // Specificity for overriding .inverted
- button:focus,
- button:hover,
- [type="checkbox"]:focus + label,
- [type="checkbox"] + label:hover {
- background: $control-bg-hover;
- color: $control-color-hover;
- opacity: 1;
- }
- button:focus,
- input:focus + label {
- outline: 0;
- }
+
+ // Hide toggle icons by default
.icon-exit-fullscreen,
.icon-muted,
.icon-captions-on {
display: none;
}
+
+ // Time display
.player-time {
display: inline-block;
vertical-align: middle;
@@ -306,7 +310,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
// Add a slash in before
&::before {
- content: "\2044";
+ content: '\2044';
margin-right: $control-spacing;
}
}
@@ -314,7 +318,6 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
// Tooltips
&-tooltip {
- visibility: hidden;
position: absolute;
z-index: 2;
bottom: 100%;
@@ -329,11 +332,12 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
line-height: 1.5;
font-weight: 600;
- transform: translate(-50%, ($tooltip-padding * 3));
- transition: transform .2s .2s ease, opacity .2s .2s ease;
+ transform: translate(-50%, ($tooltip-padding * 3)) scale(0);
+ transform-origin: 50% 100%;
+ transition: transform .2s .1s ease, opacity .2s .1s ease;
&::after {
- content: "";
+ content: '';
display: block;
position: absolute;
left: 50%;
@@ -347,15 +351,11 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
border-color: $controls-bg transparent transparent;
}
}
- label:hover .player-tooltip,
- input:focus + label .player-tooltip,
button:hover .player-tooltip,
button:focus .player-tooltip {
- visibility: visible;
opacity: 1;
- transform: translate(-50%, 0);
+ transform: translate(-50%, 0) scale(1);
}
- label:hover .player-tooltip,
button:hover .player-tooltip {
z-index: 3;
}
@@ -373,7 +373,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
&-buffer[value],
&-played[value],
- &-seek[type=range] {
+ &-seek[type='range'] {
position: absolute;
left: 0;
top: 0;
@@ -389,7 +389,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
background: transparent;
}
&-buffer[value],
- &-played[value] {
+ &-played[value] {
&::-webkit-progress-bar {
background: transparent;
}
@@ -413,7 +413,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
// Seek control
// <input[type='range']> element
// Specificity is for bootstrap compatibility
- &-seek[type=range] {
+ &-seek[type='range'] {
z-index: 4;
cursor: pointer;
outline: 0;
@@ -435,7 +435,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
-moz-appearance: none;
@include seek-thumb();
}
-
+
// Microsoft
&::-ms-track {
color: transparent;
@@ -465,15 +465,15 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
background-repeat: repeat-x;
background-color: $progress-buffered-bg;
background-image: linear-gradient(
- -45deg,
- $progress-loading-bg 25%,
- transparent 25%,
- transparent 50%,
- $progress-loading-bg 50%,
+ -45deg,
+ $progress-loading-bg 25%,
+ transparent 25%,
+ transparent 50%,
+ $progress-loading-bg 50%,
$progress-loading-bg 75%,
- transparent 75%,
+ transparent 75%,
transparent);
- color: transparent;
+ color: transparent;
}
// States
@@ -488,18 +488,18 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
// Volume control
// <input[type='range']> element
// Specificity is for bootstrap compatibility
- &-volume[type=range] {
+ &-volume[type='range'] {
display: inline-block;
vertical-align: middle;
-webkit-appearance: none;
-moz-appearance: none;
width: 100px;
margin: 0 $control-spacing 0 0;
- padding: 0;
+ padding: 0;
cursor: pointer;
background: transparent;
border: none;
-
+
// Webkit
&::-webkit-slider-runnable-track {
@include volume-track();
@@ -517,7 +517,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
&::-moz-range-thumb {
@include volume-thumb();
}
-
+
// Microsoft
&::-ms-track {
height: $volume-track-height;
@@ -554,7 +554,6 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
// https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
&.ios &-volume,
&.ios [data-player='mute'],
- &.ios [data-player='mute'] + label,
&-audio.ios &-controls-right {
display: none;
}
@@ -593,15 +592,6 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
.player-video-wrapper {
height: 100%;
width: 100%;
-
- .player-captions {
- top: auto;
- bottom: 90px;
-
- @media (min-width: $bp-control-split) {
- bottom: 60px;
- }
- }
}
.player-controls {
position: absolute;
@@ -611,13 +601,29 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
}
// Hide controls when playing in full screen
- &.fullscreen-hide-controls.playing .player-controls {
- transform: translateY(100%) translateY($control-spacing / 2);
- transition: transform .3s .2s ease;
-
- &.hover {
+ &.fullscreen-hide-controls.playing {
+ .player-controls {
+ transform: translateY(100%) translateY($control-spacing / 2);
+ transition: transform .3s .2s ease;
+ }
+ &.player-hover .player-controls {
transform: translateY(0);
}
+ .player-captions {
+ bottom: ($control-spacing / 2);
+ transition: bottom .3s .2s ease;
+ }
+ }
+
+ // Captions
+ .player-captions,
+ &.fullscreen-hide-controls.playing.player-hover .player-captions {
+ top: auto;
+ bottom: 90px;
+
+ @media (min-width: $bp-control-split) {
+ bottom: 60px;
+ }
}
}
@@ -634,15 +640,11 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
// Some options are hidden by default
[data-player='captions'],
- [data-player='captions'] + label,
- [data-player='fullscreen'],
- [data-player='fullscreen'] + label {
+ [data-player='fullscreen'] {
display: none;
}
&.captions-enabled [data-player='captions'],
- &.captions-enabled [data-player='captions'] + label,
- &.fullscreen-enabled [data-player='fullscreen'],
- &.fullscreen-enabled [data-player='fullscreen'] + label {
+ &.fullscreen-enabled [data-player='fullscreen'] {
display: inline-block;
}
-} \ No newline at end of file
+}
diff --git a/src/sprite/icon-captions-off.svg b/src/sprite/icon-captions-off.svg
index 56fc708d..c9bd5b3c 100644
--- a/src/sprite/icon-captions-off.svg
+++ b/src/sprite/icon-captions-off.svg
@@ -1,8 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
- <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
- <title>icon-captions-off</title>
- <desc>Created with Sketch.</desc>
+<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
<path d="M1,2 C0.448,2 0,2.448 0,3 L0,15 C0,15.552 0.448,16 1,16 L17,16 C17.552,16 18,15.552 18,15 L18,3 C18,2.448 17.552,2 17,2 L1,2 Z M2,14 L2,4 L16,4 L16,14 L2,14 L2,14 Z" id="Shape" sketch:type="MSShapeGroup"></path>
diff --git a/src/sprite/icon-captions-on.svg b/src/sprite/icon-captions-on.svg
index 4e388e41..1ed58de9 100644
--- a/src/sprite/icon-captions-on.svg
+++ b/src/sprite/icon-captions-on.svg
@@ -1,8 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
- <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
- <title>icon-captions-on</title>
- <desc>Created with Sketch.</desc>
+<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
<path d="M1,2 C0.448,2 0,2.448 0,3 L0,15 C0,15.552 0.448,16 1,16 L17,16 C17.552,16 18,15.552 18,15 L18,3 C18,2.448 17.552,2 17,2 L1,2 Z M2,14 L2,4 L16,4 L16,14 L2,14 L2,14 Z" id="Shape" sketch:type="MSShapeGroup"></path>
diff --git a/src/sprite/icon-enter-fullscreen.svg b/src/sprite/icon-enter-fullscreen.svg
index 5fd651bd..13434bb1 100644
--- a/src/sprite/icon-enter-fullscreen.svg
+++ b/src/sprite/icon-enter-fullscreen.svg
@@ -1,8 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
- <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
- <title>expand</title>
- <desc>Created with Sketch.</desc>
+<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
<g id="expand" sketch:type="MSLayerGroup" transform="translate(-1.000000, -1.000000)">
diff --git a/src/sprite/icon-exit-fullscreen.svg b/src/sprite/icon-exit-fullscreen.svg
index d41e0402..ff4269bc 100644
--- a/src/sprite/icon-exit-fullscreen.svg
+++ b/src/sprite/icon-exit-fullscreen.svg
@@ -1,8 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
- <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
- <title>collapse</title>
- <desc>Created with Sketch.</desc>
+<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1">
<g id="collapse" sketch:type="MSLayerGroup" transform="translate(-1.000000, -1.000000)">
diff --git a/src/sprite/icon-fast-forward.svg b/src/sprite/icon-fast-forward.svg
index cc4ee6d1..05b23faa 100755
--- a/src/sprite/icon-fast-forward.svg
+++ b/src/sprite/icon-fast-forward.svg
@@ -1,6 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
+<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M17.569 8.246l-10.569-6.246c-0.552 0-1 0.448-1 1v1.954l-5-2.954c-0.552 0-1 0.448-1 1v12c0 0.552 0.448 1 1 1l5-2.955v1.955c0 0.552 0.448 1 1 1l10.569-6.246c0.267-0.158 0.431-0.444 0.431-0.754s-0.164-0.597-0.431-0.754zM6 10.722l-4 2.364v-8.172l4 2.364v3.444zM8 13.086v-8.172l6.915 4.086-6.915 4.086z"></path>
</svg>
diff --git a/src/sprite/icon-muted.svg b/src/sprite/icon-muted.svg
index 031da8d1..532c513d 100644
--- a/src/sprite/icon-muted.svg
+++ b/src/sprite/icon-muted.svg
@@ -1,9 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
- <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
- <title>muted</title>
- <desc>Created with Sketch.</desc>
- <defs></defs>
+<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
<g id="sound" sketch:type="MSLayerGroup" transform="translate(0.000000, 2.000000)">
<path d="M9.214,0 C9.103,0 8.989,0.032 8.88,0.101 L4.832,2.911 C4.749,2.969 4.65,3 4.549,3 L0.996,3 C0.446,3 1.33226763e-15,3.448 1.33226763e-15,4 L1.33226763e-15,10 C1.33226763e-15,10.552 0.446,11 0.996,11 L4.549,11 C4.651,11 4.749,11.031 4.832,11.089 L8.88,13.899 C8.989,13.968 9.103,14 9.214,14 C9.606,14 9.961,13.6 9.961,13.051 L9.961,0.95 C9.961,0.4 9.606,0.001 9.214,0.001 L9.214,0 Z M7.969,10.834 L5.582,9.177 C5.416,9.062 5.218,8.999 5.016,8.999 L2.491,8.999 C2.216,8.999 1.993,8.775 1.993,8.499 L1.993,5.499 C1.993,5.223 2.216,4.999 2.491,4.999 L5.016,4.999 C5.218,4.999 5.416,4.937 5.582,4.821 L7.969,3.164 L7.969,10.833 L7.969,10.834 Z" id="Shape" sketch:type="MSShapeGroup"></path>
diff --git a/src/sprite/icon-pause.svg b/src/sprite/icon-pause.svg
index ea2efe98..ee25646d 100644
--- a/src/sprite/icon-pause.svg
+++ b/src/sprite/icon-pause.svg
@@ -1,8 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
- <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
- <title>pause</title>
- <desc>Created with Sketch.</desc>
+<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
<g id="pause" sketch:type="MSLayerGroup" transform="translate(2.000000, 2.000000)">
diff --git a/src/sprite/icon-play.svg b/src/sprite/icon-play.svg
index ebe9ff57..f0057b32 100755
--- a/src/sprite/icon-play.svg
+++ b/src/sprite/icon-play.svg
@@ -1,6 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
+<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M5 4.914l6.915 4.086-6.915 4.086v-8.172zM4 2c-0.552 0-1 0.448-1 1v12c0 0.552 0.448 1 1 1l10.569-6.246c0.267-0.158 0.431-0.444 0.431-0.754s-0.164-0.597-0.431-0.754l-10.569-6.246z"></path>
</svg>
diff --git a/src/sprite/icon-restart.svg b/src/sprite/icon-restart.svg
index 3a18dfad..43645a5c 100644
--- a/src/sprite/icon-restart.svg
+++ b/src/sprite/icon-restart.svg
@@ -1,9 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
- <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
- <title>icon-restart</title>
- <desc>Created with Sketch.</desc>
- <defs></defs>
+<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
<path d="M17,2 C16.448,2 16,2.448 16,3 L16,7.318 L7,2 C6.448,2 6,2.448 6,3 L6,4.954 L1,2 C0.448,2 0,2.448 0,3 L0,15 C0,15.552 0.448,16 1,16 L6,13.045 L6,15 C6,15.552 6.448,16 7,16 L16,10.682 L16,15 C16,15.552 16.448,16 17,16 C17.552,16 18,15.552 18,15 L18,3 C18,2.448 17.552,2 17,2 L17,2 Z M6,10.722 L2,13.086 L2,4.914 L6,7.278 L6,10.722 L6,10.722 Z M8,13.086 L8,4.914 L14.915,9 L8,13.086 L8,13.086 Z" id="Shape" sketch:type="MSShapeGroup" transform="translate(9.000000, 9.000000) scale(-1, 1) translate(-9.000000, -9.000000) "></path>
</g>
diff --git a/src/sprite/icon-rewind.svg b/src/sprite/icon-rewind.svg
index 7be18d37..5f122c86 100644
--- a/src/sprite/icon-rewind.svg
+++ b/src/sprite/icon-rewind.svg
@@ -1,8 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="18px" height="21px" viewBox="0 0 18 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
- <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
- <title>rewind</title>
- <desc>Created with Sketch.</desc>
+<svg viewBox="0 0 18 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
<path d="M17.569,9.246 L7,3 C6.448,3 6,3.448 6,4 L6,5.954 L1,3 C0.448,3 0,3.448 0,4 L0,16 C0,16.552 0.448,17 1,17 L6,14.045 L6,16 C6,16.552 6.448,17 7,17 L17.569,10.754 C17.836,10.596 18,10.31 18,10 C18,9.69 17.836,9.403 17.569,9.246 L17.569,9.246 Z M6,11.722 L2,14.086 L2,5.914 L6,8.278 L6,11.722 L6,11.722 Z M8,14.086 L8,5.914 L14.915,10 L8,14.086 L8,14.086 Z" id="Shape" sketch:type="MSShapeGroup" transform="translate(9.000000, 10.000000) rotate(-180.000000) translate(-9.000000, -10.000000) "></path>
diff --git a/src/sprite/icon-volume.svg b/src/sprite/icon-volume.svg
index 6c6ca54d..edcc8867 100755
--- a/src/sprite/icon-volume.svg
+++ b/src/sprite/icon-volume.svg
@@ -1,7 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
+<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M10.214 2c-0.111 0-0.225 0.032-0.334 0.101l-4.048 2.81c-0.083 0.058-0.182 0.089-0.283 0.089h-3.553c-0.55 0-0.996 0.448-0.996 1v6c0 0.552 0.446 1 0.996 1h3.553c0.102 0 0.2 0.031 0.283 0.089l4.048 2.81c0.109 0.069 0.223 0.101 0.334 0.101 0.392 0 0.747-0.4 0.747-0.949v-12.101c0-0.55-0.355-0.949-0.747-0.949zM8.969 12.834l-2.387-1.657c-0.166-0.115-0.364-0.178-0.566-0.178h-2.525c-0.275 0-0.498-0.224-0.498-0.5v-3c0-0.276 0.223-0.5 0.498-0.5h2.525c0.202 0 0.4-0.062 0.566-0.178l2.387-1.657v7.669z"></path>
<path d="M16.934 8.799c-0.086-1.748-1.514-2.991-2.507-3.649-0.47-0.312-1.094-0.122-1.325 0.408l-0.038 0.086c-0.188 0.431-0.045 0.939 0.336 1.194 0.706 0.473 1.586 1.247 1.624 2.065 0.032 0.676-0.553 1.468-1.663 2.27-0.398 0.288-0.529 0.839-0.285 1.275l0.042 0.075c0.266 0.475 0.866 0.624 1.3 0.312 1.74-1.251 2.586-2.606 2.516-4.037z"></path>
</svg>
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-09 09:01:18 +0000