Merge branch 'master' into develop

# Conflicts: # dist/plyr.css # dist/plyr.js # docs/dist/docs.css # docs/src/less/components/examples.less # src/js/plyr.js
2015-08-27 07:36:17 +10:00
parent 0785ca6024 6543fc1e5b
commit 95e39e7bd7
32 changed files with 675 additions and 370 deletions
--- 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 || {}));
+}(this.plyr = this.plyr || {}));
--- 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;
    }
 }
--- 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;
    }
-}
+}
--- 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>
--- 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>
--- 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)">
--- 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)">
--- 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>
--- 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>
--- 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)">
--- 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>
--- 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>
--- 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>
--- 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>