Merge remote-tracking branch 'org/develop' into develop

6 files changed, 720 insertions, 662 deletions

diff --git a/src/js/plyr.js b/src/js/plyr.js
index 9e3fd6dd..c34a1070 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -39,8 +39,9 @@
         duration:               null,
         displayDuration:        true,
         iconPrefix:             'icon',
-        click:                  true,
-        tooltips:               {
+        clickToPlay:            true,
+        hideControls:           true,
+        tooltips: {
             controls:           false,
             seek:               true
         },
@@ -83,6 +84,7 @@
             hover:              'plyr--hover',
             tooltip:            'plyr__tooltip',
             hidden:             'plyr__sr-only',
+            hideControls:       'plyr--hide-controls',
             isIos:              'plyr--is-ios',
             isTouch:            'plyr--is-touch',
             captions: {
@@ -91,8 +93,7 @@
             },
             fullscreen: {
                 enabled:        'plyr--fullscreen-enabled',
-                active:         'plyr--fullscreen-active',
-                hideControls:   'plyr--fullscreen--hide-controls'
+                active:         'plyr--fullscreen-active'
             },
             tabFocus:           'tab-focus'
         },
@@ -102,14 +103,13 @@
         fullscreen: {
             enabled:            true,
             fallback:           true,
-            hideControls:       true,
             allowAudio:         false
         },
         storage: {
             enabled:            true,
             key:                'plyr'
         },
-        controls:               ['restart', 'rewind', 'play', 'fast-forward', 'current-time', 'duration', 'mute', 'volume', 'captions', 'fullscreen'],
+        controls:               ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'fullscreen'],
         i18n: {
             restart:            'Restart',
             rewind:             'Rewind {seektime} secs',
@@ -393,6 +393,30 @@
         return false;
     }
 
+    // Debounce
+    // deBouncer by hnldesign.nl
+    // based on code by Paul Irish and the original debouncing function from John Hann
+    // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
+    function _debounce(func, threshold, execAsap) {
+        var timeout;
+        return function debounced () {
+            var obj = this, args = arguments;
+            function delayed () {
+                if (!execAsap) {
+                    func.apply(obj, args);
+                }
+                timeout = null;
+            }
+            if (timeout) {
+                clearTimeout(timeout);
+            }
+            else if (execAsap) {
+                func.apply(obj, args);
+            }
+            timeout = setTimeout(delayed, threshold || 100);
+        };
+    }
+
     // Bind event
     function _on(element, events, callback) {
         if (element) {
@@ -637,27 +661,20 @@
 
         // Build the default HTML
         function _buildControls() {
-            // Open and add the progress and seek elements
-            var html = [
-            '<div class="plyr__controls">',
-                '<div class="plyr__progress">',
-                    '<label for="seek{id}" class="plyr__sr-only">Seek</label>',
-                    '<input id="seek{id}" class="plyr__progress--seek" type="range" min="0" max="100" step="0.1" value="0" data-plyr="seek">',
-                    '<progress class="plyr__progress--played" max="100" value="0">',
-                        '<span>0</span>% ' + config.i18n.played,
-                    '</progress>',
-                    '<progress class="plyr__progress--buffer" max="100" value="0">',
-                        '<span>0</span>% ' + config.i18n.buffered,
-                    '</progress>'];
+            // Create html array
+            var html = [];
 
-            // Seek tooltip
-            if (config.tooltips.seek) {
-                html.push('<span class="plyr__tooltip">00:00</span>');
+            // Larger overlaid play button
+            if (_inArray(config.controls, 'play-large')) {
+                html.push(
+                    '<button type="button" data-plyr="play" class="plyr__play-large">',
+                        '<svg><use xlink:href="#' + config.iconPrefix + '-play" /></svg>',
+                        '<span class="plyr__sr-only">' + config.i18n.play + '</span>',
+                    '</button>'
+                );
             }
 
-            // Close progress
-            html.push('</div>',
-                '<span class="plyr__controls--left">');
+            html.push('<div class="plyr__controls">');
 
             // Restart button
             if (_inArray(config.controls, 'restart')) {
@@ -679,7 +696,8 @@
                 );
             }
 
-            // Play/pause button
+            // Play Pause button
+            // TODO: This should be a toggle button really?
             if (_inArray(config.controls, 'play')) {
                 html.push(
                     '<button type="button" data-plyr="play">',
@@ -703,6 +721,28 @@
                 );
             }
 
+            // Progress
+            if (_inArray(config.controls, 'progress')) {
+                // Create progress
+                html.push('<span class="plyr__progress">',
+                    '<label for="seek{id}" class="plyr__sr-only">Seek</label>',
+                    '<input id="seek{id}" class="plyr__progress--seek" type="range" min="0" max="100" step="0.1" value="0" data-plyr="seek">',
+                    '<progress class="plyr__progress--played" max="100" value="0">',
+                        '<span>0</span>% ' + config.i18n.played,
+                    '</progress>',
+                    '<progress class="plyr__progress--buffer" max="100" value="0">',
+                        '<span>0</span>% ' + config.i18n.buffered,
+                    '</progress>');
+
+                // Seek tooltip
+                if (config.tooltips.seek) {
+                    html.push('<span class="plyr__tooltip">00:00</span>');
+                }
+
+                // Close
+                html.push('</span>');
+            }
+
             // Media current time display
             if (_inArray(config.controls, 'current-time')) {
                 html.push(
@@ -723,12 +763,6 @@
                 );
             }
 
-            // Close left controls
-            html.push(
-                '</span>',
-                '<span class="plyr__controls--right">'
-            );
-
             // Toggle mute button
             if (_inArray(config.controls, 'mute')) {
                 html.push(
@@ -771,10 +805,7 @@
             }
 
             // Close everything
-            html.push(
-                '</span>',
-            '</div>'
-            );
+            html.push('</div>');
 
             return html.join('');
         }
@@ -804,11 +835,6 @@
 
                 // Setup focus trap
                 _focusTrap();
-
-                // Set control hide class hook
-                if (config.fullscreen.hideControls) {
-                    _toggleClass(plyr.container, config.classes.fullscreen.hideControls, true);
-                }
             }
         }
 
@@ -1174,7 +1200,7 @@
 
             // Setup tooltips
             if (config.tooltips.controls) {
-                var labels = _getElements(config.selectors.labels + ' .' + config.classes.hidden);
+                var labels = _getElements([config.selectors.controls.wrapper, ' ', config.selectors.labels, ' .', config.classes.hidden].join(''));
 
                 for (var i = labels.length - 1; i >= 0; i--) {
                     var label = labels[i];
@@ -1193,7 +1219,7 @@
                 // Buttons
                 plyr.buttons = {};
                 plyr.buttons.seek             = _getElement(config.selectors.buttons.seek);
-                plyr.buttons.play             = _getElement(config.selectors.buttons.play);
+                plyr.buttons.play             = _getElements(config.selectors.buttons.play);
                 plyr.buttons.pause            = _getElement(config.selectors.buttons.pause);
                 plyr.buttons.restart          = _getElement(config.selectors.buttons.restart);
                 plyr.buttons.rewind           = _getElement(config.selectors.buttons.rewind);
@@ -1237,7 +1263,7 @@
                 _log('It looks like there is a problem with your controls html', true);
 
                 // Restore native video controls
-                _toggleControls(true);
+                _toggleNativeControls(true);
 
                 return false;
             }
@@ -1249,7 +1275,7 @@
         }
 
         // Toggle native controls
-        function _toggleControls(toggle) {
+        function _toggleNativeControls(toggle) {
             if(toggle) {
                 plyr.media.setAttribute('controls', '');
             }
@@ -1270,7 +1296,9 @@
 
             // If there's a play button, set label
             if (plyr.supported.full && plyr.buttons.play) {
-                plyr.buttons.play.setAttribute('aria-label', label);
+                for (var i = plyr.buttons.play.length - 1; i >= 0; i--) {
+                    plyr.buttons.play[i].setAttribute('aria-label', label);
+                }
             }
 
             // Set iframe title
@@ -1292,6 +1320,12 @@
                 // Add type class
                 _toggleClass(plyr.container, config.classes.type.replace('{0}', plyr.type), true);
 
+                // Add video class for embeds
+                // This will require changes if audio embeds are added
+                if (_inArray(config.types.embed, plyr.type)) {
+                    _toggleClass(plyr.container, config.classes.type.replace('{0}', 'video'), true);
+                }
+
                 // If there's no autoplay attribute, assume the video is stopped and add state class
                 _toggleClass(plyr.container, config.classes.stopped, config.autoplay);
 
@@ -1869,6 +1903,8 @@
         function _checkPlaying() {
             _toggleClass(plyr.container, config.classes.playing, !plyr.media.paused);
             _toggleClass(plyr.container, config.classes.stopped, plyr.media.paused);
+
+            _toggleControls(plyr.media.paused);
         }
 
         // Toggle fullscreen
@@ -1926,12 +1962,6 @@
             // Set button state
             _toggleState(plyr.buttons.fullscreen, plyr.isFullscreen);
 
-            // Hide on entering full screen
-            if (config.fullscreen.hideControls) {
-                //_toggleClass(plyr.controls, config.classes.hover, false);
-                _showControls(true);
-            }
-
             // Trigger an event
             _triggerEvent(plyr.container, plyr.isFullscreen ? 'enterfullscreen' : 'exitfullscreen');
         }
@@ -2273,24 +2303,51 @@
         }
 
         // Show the player controls in fullscreen mode
-        function _showControls(force) {
-            // We're only worried about fullscreen
-            if (!plyr.isFullscreen) {
+        function _toggleControls(toggle) {
+            if (!config.hideControls || plyr.type === 'audio') {
                 return;
             }
+            var delay = false,
+                isEnterFullscreen = false,
+                show = toggle;
 
-            // Set shown class
-            _toggleClass(plyr.container, config.classes.hover, true);
+            // Default to false if no boolean
+            if(typeof toggle !== "boolean") {
+                if(toggle && toggle.type) {
+                    delay = (toggle.type === 'mousemove');
+                    isEnterFullscreen = (toggle.type === 'enterfullscreen');
+                    show = _inArray(['mousemove','mouseenter'], toggle.type);
+                }
+                else {
+                    show = false;
+                }
+            }
 
             // Clear timer every movement
             window.clearTimeout(plyr.timers.hover);
 
             // If the mouse is not over the controls, set a timeout to hide them
-            plyr.timers.hover = window.setTimeout(function() {
-                if (!plyr.controls.mouseover || (force === true)) {
-                    _toggleClass(plyr.container, config.classes.hover, false);
+            if(show || plyr.media.paused) {
+                _toggleClass(plyr.container, config.classes.hideControls, false);
+
+                // Always show controls when paused
+                if(plyr.media.paused) {
+                    return;
                 }
-            }, 2000);
+            }
+
+            // If toggle is false or if we're playing (regardless of toggle), then
+            // set the timer to hide the controls 
+            if(!show || !plyr.media.paused) {
+                plyr.timers.hover = window.setTimeout(function() {
+                    // If the mouse is over the controls, bail
+                    if(plyr.controls.active && !isEnterFullscreen) {
+                        return;
+                    }
+
+                    _toggleClass(plyr.container, config.classes.hideControls, true);
+                }, delay ? 2000 : 0);
+            }
         }
 
         // Add common function to retrieve media source
@@ -2339,6 +2396,11 @@
             // Pause playback
             _pause();
 
+            // Set seek input to 0
+            if(plyr.buttons.seek) {
+                plyr.buttons.seek.value = 0;
+            }
+
             // Clean up YouTube stuff
             if (plyr.type === 'youtube') {
                 // Destroy the embed instance
@@ -2578,13 +2640,15 @@
             // Seek tooltip
             _on(plyr.progress.container, 'mouseenter mouseleave mousemove', _updateSeekTooltip);
 
-            // Toggle controls visibility based on mouse movement and location
-            var hoverTimer, isMouseOver = false;
+            // Toggle controls visibility based on mouse movement
+            if (config.hideControls) {
+                _on(plyr.container, 'mouseenter mouseleave mousemove', _toggleControls);
+                //_on(plyr.container, 'mousemove', _debounce(_toggleControls, 200, true));
+                _on(plyr.container, 'enterfullscreen', _toggleControls);
 
-            if (config.fullscreen.hideControls) {
-                // Keep an eye on the mouse location in relation to controls
-                _on(plyr.controls, 'mouseenter mouseleave', function(event) {
-                    plyr.controls.mouseover = (event.type === 'mouseenter');
+                // Watch for cursor over controls so they don't hide when trying to interact
+                _on(plyr.controls, 'mouseenter mouseleave', function(event) { 
+                    plyr.controls.active = (event.type === 'mouseenter');
                 });
             }
         }
@@ -2624,7 +2688,10 @@
             _on(plyr.media, 'waiting canplay seeked', _checkLoading);
 
             // Click video
-            if (config.click) {
+            if (config.clickToPlay) {
+                // Set cursor
+                plyr.videoContainer.style.cursor = "pointer";
+
                 _on(plyr.media, 'click', function() {
                     if (plyr.media.paused) {
                         _play();
@@ -2639,12 +2706,6 @@
                 });
             }
 
-            // Listen for mouse move to show controls
-            if (config.fullscreen.hideControls) {
-                // Show the controls on mouse move
-                _on(plyr.media, 'mousemove', _showControls);
-            }
-
             // Proxy events to container
             _on(plyr.media, config.events.join(' '), function(event) {
                 _triggerEvent(plyr.container, event.type);
@@ -2710,7 +2771,7 @@
             }
 
             // Restore native video controls
-            _toggleControls(true);
+            _toggleNativeControls(true);
 
             // Clone the media element to remove listeners
             // http://stackoverflow.com/questions/19469881/javascript-remove-all-event-listeners-of-specific-type
@@ -2808,7 +2869,7 @@
                 _remove(_getElement(config.selectors.controls.wrapper));
 
                 // Restore native controls
-                _toggleControls(true);
+                _toggleNativeControls(true);
 
                 // Bail
                 return;
@@ -2835,7 +2896,7 @@
             _mediaListeners();
 
             // Remove native controls
-            _toggleControls();
+            _toggleNativeControls();
 
             // Setup fullscreen
             _setupFullscreen();
diff --git a/src/less/plyr.less b/src/less/plyr.less
index f27023bc..99df1115 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -7,12 +7,7 @@
 // -------------------------------
 
 // Colors
-@plyr-blue:                          #3498DB;
-@plyr-gray-dark:                     #343F4A;
-@plyr-gray:                          #565D64;
-@plyr-gray-light:                    #6B7D86;
-@plyr-gray-lighter:                  #CBD0D3;
-@plyr-off-white:                     #D6DADD;
+@plyr-color-main:                    #63B4E1;
 
 // Font sizes
 @plyr-font-size-small:               14px;
@@ -24,37 +19,45 @@
 @plyr-font-size-captions-large:      (@plyr-font-size-base * 2);
 
 // Controls
+// #C6D6DB
 @plyr-control-spacing:               10px;
-@plyr-controls-bg:                   #fff;
-@plyr-control-bg-hover:              @plyr-blue;
-.contrast-control-color(@plyr-controls-bg);
-.contrast-control-color-hover(@plyr-control-bg-hover);
+@plyr-video-controls-bg:             #000;
+@plyr-video-control-color:           #fff;
+@plyr-video-control-color-hover:     #fff;
+@plyr-video-control-bg-hover:        @plyr-color-main;
+@plyr-audio-controls-bg:             transparent;
+@plyr-audio-control-color:           #565D64;
+@plyr-audio-control-color-hover:     #fff;
+@plyr-audio-control-bg-hover:        @plyr-color-main;
 
 // Tooltips
-@plyr-tooltip-bg:                    @plyr-controls-bg;
-@plyr-tooltip-border-color:          fade(darken(@plyr-controls-bg, 75%), 10%);
-@plyr-tooltip-arrow-border-color:    fade(darken(@plyr-controls-bg, 75%), 20%);
+@plyr-tooltip-bg:                    @plyr-video-controls-bg;
+@plyr-tooltip-border-color:          fade(darken(@plyr-video-controls-bg, 75%), 10%);
+@plyr-tooltip-arrow-border-color:    fade(darken(@plyr-video-controls-bg, 75%), 20%);
 @plyr-tooltip-border-width:          1px;
 @plyr-tooltip-shadow:                0 0 5px @plyr-tooltip-border-color, 0 0 0 @plyr-tooltip-border-width @plyr-tooltip-border-color;
-@plyr-tooltip-color:                 @plyr-control-color;
-@plyr-tooltip-padding:               @plyr-control-spacing;
-@plyr-tooltip-arrow-size:            6px;
+@plyr-tooltip-color:                 @plyr-video-control-color;
+@plyr-tooltip-padding:               (@plyr-control-spacing / 2);
+@plyr-tooltip-arrow-size:            4px;
 @plyr-tooltip-radius:                3px;
 
 // Progress
-@plyr-progress-bg:                   fade(@plyr-gray, 20%);
-@plyr-progress-playing-bg:           @plyr-blue;
-@plyr-progress-buffered-bg:          fade(@plyr-gray, 25%);
-@plyr-progress-loading-size:         40px;
+@plyr-progress-bg:                   fade(@plyr-video-control-color, 25%);
+@plyr-progress-playing-bg:           @plyr-color-main;
+@plyr-progress-buffered-bg:          fade(@plyr-video-control-color, 25%);
+@plyr-progress-loading-size:         25px;
 @plyr-progress-loading-bg:           fade(#000, 15%);
 
-// Volume
-@plyr-volume-track-height:           6px;
-@plyr-volume-track-bg:               darken(@plyr-controls-bg, 10%);
-@plyr-volume-thumb-height:           (@plyr-volume-track-height * 2);
-@plyr-volume-thumb-width:            (@plyr-volume-track-height * 2);
-@plyr-volume-thumb-bg:               @plyr-control-color;
-@plyr-volume-thumb-bg-focus:         @plyr-control-bg-hover;
+// Range sliders
+@range-track-height:                 8px;
+@range-track-bg:                     fade(#fff, 25%);
+@range-thumb-height:                 floor(@range-track-height * 2);
+@range-thumb-width:                  floor(@range-track-height * 2);
+@range-thumb-bg:                     #fff;
+@range-thumb-border:                 2px solid transparent;
+@range-thumb-active-border-color:    #fff;
+@range-thumb-active-bg:              @plyr-video-control-bg-hover;
+@range-thumb-shadow:                 0 1px 1px fade(@plyr-video-controls-bg, 15%);
 
 // Breakpoints
 @plyr-bp-control-split:              560px; // When controls split into left/right
@@ -68,59 +71,29 @@
 
 // Mixins
 // -------------------------------
-// Contrast
-.contrast-control-color(@plyr-color: "") when (lightness(@plyr-color) >= 65%) {
-    @plyr-control-color: @plyr-gray-light;
-}
-.contrast-control-color(@plyr-color: "") when (lightness(@plyr-color) < 65%) {
-    @plyr-control-color: @plyr-gray-lighter;
-}
-.contrast-control-color-hover(@plyr-color: "") when (lightness(@plyr-color) >= 65%) {
-    @plyr-control-color-hover: @plyr-gray;
-}
-.contrast-control-color-hover(@plyr-color: "") when (lightness(@plyr-color) < 65%) {
-    @plyr-control-color-hover: #fff;
-}
-
-// Font smoothing
-.font-smoothing(@mode: on) when (@mode = on) {
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-}
-.font-smoothing(@mode: on) when (@mode = off) {
-    -moz-osx-font-smoothing: auto;
-    -webkit-font-smoothing: subpixel-antialiased;
-}
-
 // <input type="range"> styling
-.volume-thumb() {
-    height: @plyr-volume-thumb-height;
-    width: @plyr-volume-thumb-width;
-    background: @plyr-volume-thumb-bg;
+.range-track() {
+    height: @range-track-height;
+    background: @range-track-bg;
     border: 0;
-    border-radius: 100%;
-    transition: background .3s ease;
-    cursor: ew-resize;
+    border-radius: (@range-track-height / 2);
+    user-select: none;
 }
-.volume-track() {
-    height: @plyr-volume-track-height;
-    background: @plyr-volume-track-bg;
-    border: 0;
-    border-radius: (@plyr-volume-track-height / 2);
-}
-.seek-thumb() {
-    background: transparent;
-    border: 0;
-    width: 1px;
-    height: @plyr-control-spacing;
-}
-.seek-thumb-touch() {
-    width: (@plyr-control-spacing * 4);
-    transform: translateX(-50%);
+.range-thumb() {
+    position: relative;
+    height: @range-thumb-height;
+    width: @range-thumb-width;
+    background: @range-thumb-bg;
+    border: @range-thumb-border;
+    border-radius: 100%;
+    transition: background .2s ease, border .2s ease, transform .2s ease;
+    box-shadow: @range-thumb-shadow;
+    box-sizing: border-box;
 }
-.seek-track() {
-    background: none;
-    border: 0;
+.range-thumb-active() {
+    background: @range-thumb-active-bg;
+    border-color: @range-thumb-active-border-color;
+    transform: scale(1.25);
 }
 
 // Styles
@@ -146,579 +119,593 @@
         touch-action: manipulation;
     }
 
-    // Screen reader only elements
-    &__sr-only {
-        position: absolute !important;
-        clip: rect(1px, 1px, 1px, 1px);
-        padding: 0 !important;
-        border: 0 !important;
-        height: 1px !important;
-        width: 1px !important;
-        overflow: hidden;
-    }
-
-    // For video
-    &__video-wrapper {
-        position: relative;
-    }
+    // Media elements
     video,
     audio {
         width: 100%;
         height: auto;
         vertical-align: middle;
+        border-radius: inherit;
     }
 
-    // Hide default captions
-    video::-webkit-media-text-track-container {
-        display: none;
-    }
-
-    // Container for embeds
-    &__video-embed {
-        padding-bottom: 56.25%; /* 16:9 */
-        height: 0;
-        overflow: hidden;
-        background: #000;
-
-        iframe {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            border: 0;
-            user-select: none;
+    // Range inputs
+    // Specificity is for bootstrap compatibility
+    input[type='range'] {
+        display: block;
+        height: @range-thumb-height;
+        width: 100%;
+        margin: 0;
+        padding: 0; 
+        vertical-align: middle;
+        
+        appearance: none;
+        cursor: pointer;
+        border: none;
+        background: transparent;
+        
+        // Webkit
+        &::-webkit-slider-runnable-track {
+            .range-track();
         }
-
-        // Vimeo hack
-        > div {
-            position: relative;
-            padding-bottom: 200%;
-            transform: translateY(-35.95%);
+        &::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            margin-top: -((@range-thumb-height - @range-track-height) / 2);
+            .range-thumb();
         }
 
-        // To allow mouse events to be captured if full support
-        &.plyr iframe {
-            pointer-events: none;
+        // Mozilla
+        &::-moz-range-track {
+            .range-track();
         }
-    }
-
-    // Captions
-    &__captions {
-        display: none;
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        padding: (@plyr-control-spacing * 2) (@plyr-control-spacing * 2) (@plyr-control-spacing * 3);
-        color: #fff;
-        font-size: @plyr-font-size-captions-base;
-        text-align: center;
-        .font-smoothing();
-
-        span {
-            border-radius: 2px;
-            padding: 3px 10px;
-            background: fade(#000, 90%);
+        &::-moz-range-thumb {
+            .range-thumb();
         }
-        span:empty {
-            display: none;
+        &::-moz-focus-outer {
+            border: 0;
         }
-
-        @media (min-width: @plyr-bp-captions-large) {
-            font-size: @plyr-font-size-captions-medium;
+        
+        // Microsoft
+        &::-ms-track {
+            height: @range-track-height;
+            background: transparent;
+            border: 0;
+            color: transparent;
         }
-    }
-    &--captions-active &__captions {
-        display: block;
-    }
-    &--fullscreen-active &__captions {
-        font-size: @plyr-font-size-captions-large;
-    }
-
-    // Playback controls
-    &__controls {
-        .font-smoothing();
-        position: relative;
-        padding: @plyr-control-spacing;
-        background: @plyr-controls-bg;
-        line-height: 1;
-        text-align: center;
-        box-shadow: 0 1px 1px fade(@plyr-gray-dark, 20%);
-
-        // Clear floats
-        &::after {
-            content: '';
-            display: table;
-            clear: both;
+        &::-ms-fill-lower,
+        &::-ms-fill-upper {
+            .range-track();
         }
+        &::-ms-thumb {
+            .range-thumb();
 
-        // Layout
-        &--right {
-            display: block;
-            margin: @plyr-control-spacing auto 0;
+            // For some reason, Edge uses the -webkit margin above
+            margin-top: 0; 
         }
-        @media (min-width: @plyr-bp-control-split) {
-            &--left {
-                float: left;
-            }
-            &--right {
-                float: right;
-                margin-top: 0;
-            }
+
+        &::-ms-tooltip {
+            display: none;
         }
 
-        // Buttons
-        button {
-            display: inline-block;
-            vertical-align: middle;
-            margin: 0 2px;
-            padding: (@plyr-control-spacing / 2) @plyr-control-spacing;
-            overflow: hidden;
+        // Focus styles
+        &:focus {
+            outline: 0;
+        }
+        &::-moz-focus-outer {
             border: 0;
-            background: transparent;
-            border-radius: 3px;
-            cursor: pointer;
-            color: @plyr-control-color;
-            transition: background .3s ease, color .3s ease, opacity .3s ease;
-
-            svg {
-                width: 18px;
-                height: 18px;
-                display: block;
-                fill: currentColor;
-                transition: fill .3s ease;
+        }        
+        &.tab-focus:focus {
+            outline: 1px dotted fade(@plyr-video-control-color, 50%);
+            outline-offset: 3px;
+        }
+        
+        // Pressed styles
+        &:active {
+            &::-webkit-slider-thumb {
+                .range-thumb-active();
             }
-
-            // Hover and tab focus
-            &.tab-focus:focus,
-            &:hover {
-                background: @plyr-control-bg-hover;
-                color: @plyr-control-color-hover;
+            &::-moz-range-thumb {
+                .range-thumb-active();
             }
-            // Default focus
-            &:focus {
-                outline: 0;
+            &::-ms-thumb {
+                .range-thumb-active();
             }
         }
+    }
+}
 
-        // Hide toggle icons by default
-        .icon--exit-fullscreen,
-        .icon--muted,
-        .icon--captions-on {
-            display: none;
-        }
+// Screen reader only elements
+.plyr__sr-only {
+    position: absolute !important;
+    clip: rect(1px, 1px, 1px, 1px);
+    padding: 0 !important;
+    border: 0 !important;
+    height: 1px !important;
+    width: 1px !important;
+    overflow: hidden;
+}
 
-        // plyr time
-        .plyr__time {
-            display: inline-block;
-            vertical-align: middle;
-            margin-left: @plyr-control-spacing;
-            color: @plyr-control-color;
-            font-weight: 600;
-            font-size: @plyr-font-size-small;
-        }
+// Video
+.plyr__video-wrapper {
+    position: relative;
+    background: #000;
+    border-radius: inherit;
+}
 
-        // Media duration hidden on small screens
-        .plyr__time + .plyr__time {
-            display: none;
+// Container for embeds
+.plyr__video-embed {
+    padding-bottom: 56.25%; /* 16:9 */
+    height: 0;
+    overflow: hidden;
+    border-radius: inherit;
 
-            @media (min-width: @plyr-bp-control-split) {
-                display: inline-block;
-            }
+    iframe {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border: 0;
+        user-select: none;
+    }
 
-            // Add a slash in before
-            &::before {
-                content: '\2044';
-                margin-right: @plyr-control-spacing;
-            }
-        }
+    // Vimeo hack
+    > div {
+        position: relative;
+        padding-bottom: 200%;
+        transform: translateY(-35.95%);
     }
+}
+// To allow mouse events to be captured if full support
+.plyr .plyr__video-embed iframe {
+    pointer-events: none;
+}
 
-    // Tooltips
-    &__tooltip {
-        visibility: hidden;
-        position: absolute;
-        z-index: 2;
-        bottom: 100%;
-        margin-bottom: @plyr-tooltip-padding;
-        padding: @plyr-tooltip-padding (@plyr-tooltip-padding * 1.5);
-        pointer-events: none;
-
-        opacity: 0;
-        background: @plyr-tooltip-bg;
-        box-shadow: @plyr-tooltip-shadow;
-        border-radius: @plyr-tooltip-radius;
-        color: @plyr-tooltip-color;
-        font-size: @plyr-font-size-small;
-        line-height: 1.5;
-        font-weight: 600;
-
-        transform: translate(-50%, 10px) scale(.8);
-        transform-origin: 50% 100%;
-        transition: transform .2s .1s ease, opacity .2s .1s ease, visibility .3s ease;
-
-        // Arrows
-        &::after,
-        &::before {
-            content: '';
-            position: absolute;
-            width: 0;
-            height: 0;
-            top: 100%;
-            left: 50%;
-            transform: translateX(-50%);
-        }
-        // The border triangle
-        &::after {
-            @plyr-border-arrow-size: (@plyr-tooltip-arrow-size + (@plyr-tooltip-border-width * 1));
-            bottom: -(@plyr-border-arrow-size + @plyr-tooltip-border-width);
-            border-right: @plyr-border-arrow-size solid transparent;
-            border-top: @plyr-border-arrow-size solid @plyr-tooltip-arrow-border-color;
-            border-left: @plyr-border-arrow-size solid transparent;
-            z-index: 1;
-        }
-        // The background triangle
-        &::before {
-            bottom: -@plyr-tooltip-arrow-size;
-            border-right: @plyr-tooltip-arrow-size solid transparent;
-            border-top: @plyr-tooltip-arrow-size solid @plyr-tooltip-bg;
-            border-left: @plyr-tooltip-arrow-size solid transparent;
-            z-index: 2;
-        }
+// Captions
+// --------------------------------------------------------------
+// Hide default captions
+.plyr video::-webkit-media-text-track-container {
+    display: none;
+}
+.plyr__captions {
+    display: none;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: (@plyr-control-spacing * 2) (@plyr-control-spacing * 2) (@plyr-control-spacing * 8);
+    color: #fff;
+    font-size: @plyr-font-size-captions-base;
+    text-align: center;
+    font-weight: 400;
+
+    span {
+        border-radius: 2px;
+        padding: floor(@plyr-control-spacing / 3) @plyr-control-spacing;
+        background: fade(#000, 85%);
     }
-    button:hover .plyr__tooltip,
-    button.tab-focus:focus .plyr__tooltip,
-    &__tooltip--visible {
-        visibility: visible;
-        opacity: 1;
-        transform: translate(-50%, 0) scale(1);
+    span:empty {
+        display: none;
     }
-    button:hover .plyr__tooltip {
-        z-index: 3;
+
+    @media (min-width: @plyr-bp-captions-large) {
+        font-size: @plyr-font-size-captions-medium;
     }
+}
+.plyr--captions-active .plyr__captions {
+    display: block;
+}
+.plyr--fullscreen-active .plyr__captions {
+    font-size: @plyr-font-size-captions-large;
+}
 
-    // Common range styles
-    input[type='range'] {
-        &::-ms-tooltip {
-            display: none;
-        }
-        &.tab-focus:focus {
-            outline: 1px dotted fade(@plyr-gray-dark, 80%);
-            outline-offset: 3px;
+// Controls
+// --------------------------------------------------------------
+// Shared
+.plyr__controls,
+.plyr__play-large {
+    transition: visibility .3s ease, opacity .3s ease;
+}
+
+// Playback controls
+.plyr__controls {
+    display: flex;
+    align-items: center; 
+
+    line-height: 1;
+    text-align: center;
+
+    // Spacing
+    > button,
+    .plyr__progress,
+    .plyr__time {
+        margin-left: @plyr-control-spacing;
+
+        &:first-child {
+            margin-left: 0;
         }
     }
+    .plyr__volume[type="range"] {
+        margin-left: (@plyr-control-spacing / 2);
+    }
+    [data-plyr="pause"] {
+        margin-left: 0;
+    }
 
-    // Playback progress
-    // <progress> element
-    &__progress {
-        position: absolute;
-        bottom: 100%;
-        left: 0;
-        right: 0;
-        width: 100%;
-        height: @plyr-control-spacing;
-        background: @plyr-progress-bg;
-
-        &--buffer[value],
-        &--played[value],
-        &--seek[type='range'] {
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: @plyr-control-spacing;
-            margin: 0;
-            padding: 0;
-            vertical-align: top;
+    // Buttons
+    button {
+        position: relative;
+        display: inline-block;
+        flex-shrink: 0;
+        vertical-align: middle;
+        padding: (@plyr-control-spacing / 2) @plyr-control-spacing;
+        border: 0;
+        background: transparent;
+        border-radius: 3px;
+        cursor: pointer;
+        transition: background .3s ease, color .3s ease, opacity .3s ease;
+        color: inherit;
 
-            -webkit-appearance: none;
-            -moz-appearance: none;
-            border: none;
-            background: transparent;
+        svg {
+            width: 18px;
+            height: 18px;
+            display: block;
+            fill: currentColor;
         }
-        &--buffer[value],
-        &--played[value] {
-            &::-webkit-progress-bar {
-                background: transparent;
-                transition: width .2s ease;
-            }
 
-            // Inherit from currentColor;
-            &::-webkit-progress-value {
-                background: currentColor;
-                transition: width .2s ease;
-            }
-            &::-moz-progress-bar {
-                background: currentColor;
-                transition: width .2s ease;
-            }
+        // Default focus
+        &:focus {
+            outline: 0;
         }
-        &--played[value] {
-            z-index: 2;
-            color: @plyr-progress-playing-bg;
+    }
+
+    // Hide toggle icons by default
+    .icon--exit-fullscreen,
+    .icon--muted,
+    .icon--captions-on {
+        display: none;
+    }
+}
+
+// Video controls
+.plyr--video .plyr__controls {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: (@plyr-control-spacing * 5) (@plyr-control-spacing * 1.5) @plyr-control-spacing;
+    background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 50%));
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+    color: @plyr-video-control-color;
+
+    button {
+        // Hover and tab focus
+        &.tab-focus:focus,
+        &:hover {
+            background: @plyr-video-control-bg-hover;
+            color: @plyr-video-control-color-hover;
         }
-        &--buffer[value] {
-            color: @plyr-progress-buffered-bg;
+    }
+}
+.plyr--audio .plyr__controls {
+    padding: @plyr-control-spacing;
+    border-radius: inherit;
+    background: @plyr-audio-controls-bg;
+    color: @plyr-audio-control-color;
+
+    button {
+        // Hover and tab focus
+        &.tab-focus:focus,
+        &:hover {
+            background: @plyr-audio-control-bg-hover;
+            color: @plyr-audio-control-color-hover;
         }
+    }
+}
 
-        // Seek control
-        // <input[type='range']> element
-        // Specificity is for bootstrap compatibility
-        &--seek[type='range'] {
-            z-index: 4;
-            cursor: pointer;
-            outline: 0;
+// Large play button
+.plyr__play-large {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: @plyr-control-spacing;
+    background: @plyr-video-control-bg-hover;
+    border: 4px solid @plyr-video-control-color;
+    border-radius: 100%;
+    color: @plyr-video-control-color;
 
-            // Webkit
-            &::-webkit-slider-runnable-track {
-                .seek-track();
-            }
-            &::-webkit-slider-thumb {
-                -webkit-appearance: none;
-                .seek-thumb();
-            }
+    svg {
+        position: relative;
+        left: 2px;
+        width: 20px;
+        height: 20px;
+        display: block;
+        fill: currentColor;
+    }
 
-            // Mozilla
-            &::-moz-range-track {
-                .seek-track();
-            }
-            &::-moz-range-thumb {
-                -moz-appearance: none;
-                .seek-thumb();
-            }
+    &:focus {
+        outline: 1px dotted fade(@plyr-video-control-color, 50%);
+    }
+}
+.plyr--audio .plyr__play-large {
+    display: none;
+}
 
-            // Microsoft
-            &::-ms-track {
-                color: transparent;
-                .seek-track();
-            }
-            &::-ms-fill-lower,
-            &::-ms-fill-upper {
-                .seek-track();
-            }
-            &::-ms-thumb {
-                .seek-thumb();
-            }
+// States
+.plyr__controls [data-plyr='pause'],
+.plyr--playing .plyr__controls [data-plyr='play'] {
+    display: none;
+}
+.plyr--playing .plyr__controls [data-plyr='pause'] {
+    display: inline-block;
+}
 
-            &:focus {
-                outline: 0;
-            }
-            &::-moz-focus-outer {
-                border: 0;
-            }
-        }
+// Hide controls 
+.plyr--hide-controls .plyr__controls,
+.plyr--playing .plyr__play-large {
+    visibility: hidden;
+    opacity: 0;
+}
 
-        // Seek tooltip to show time
-        .plyr__tooltip {
-            left: 0;
-        }
-    }
+// Change icons on state change
+.plyr--fullscreen-active .icon--exit-fullscreen,
+.plyr--muted .plyr__controls .icon--muted,
+.plyr--captions-active .plyr__controls .icon--captions-on {
+    display: block;
 
-    // Touch seek wider handle
-    &--is-touch &--seek[type='range'] {
-        &::-webkit-slider-thumb {
-            .seek-thumb-touch();
-        }
-        // Mozilla
-        &::-moz-range-thumb {
-            .seek-thumb-touch();
-        }
-        // Microsoft
-        &::-ms-thumb {
-            .seek-thumb-touch();
-        }
+    & + svg {
+        display: none;
     }
+}
 
-    // Loading state
-    &--loading .plyr__progress--buffer {
-        animation: plyr-progress 1s linear infinite;
-        background-size: @plyr-progress-loading-size @plyr-progress-loading-size;
-        background-repeat: repeat-x;
-        background-color: @plyr-progress-buffered-bg;
-        background-image: linear-gradient(
-            -45deg,
-            @plyr-progress-loading-bg 25%,
-            transparent 25%,
-            transparent 50%,
-            @plyr-progress-loading-bg 50%,
-            @plyr-progress-loading-bg 75%,
-            transparent 75%,
-            transparent);
-        color: transparent;
-    }
-
-    // States
-    &__controls [data-plyr='pause'],
-    &--playing .plyr__controls [data-plyr='play'] {
-        display: none;
+// Some options are hidden by default
+.plyr [data-plyr='captions'],
+.plyr [data-plyr='fullscreen'] {
+    display: none;
+}
+.plyr--captions-enabled [data-plyr='captions'],
+.plyr--fullscreen-enabled [data-plyr='fullscreen'] {
+    display: inline-block;
+}
+
+// Tooltips
+// --------------------------------------------------------------
+.plyr__tooltip {
+    visibility: hidden;
+    position: absolute;
+    z-index: 2;
+    bottom: 100%;
+    margin-bottom: (@plyr-tooltip-padding * 2);
+    padding: @plyr-tooltip-padding (@plyr-tooltip-padding * 1.5);
+    pointer-events: none;
+
+    opacity: 0;
+    background: @plyr-tooltip-bg;
+    box-shadow: @plyr-tooltip-shadow;
+    border-radius: @plyr-tooltip-radius;
+
+    color: @plyr-tooltip-color;
+    font-size: @plyr-font-size-small;
+    line-height: 1.3;
+
+    transform: translate(-50%, 10px) scale(.8);
+    transform-origin: 50% 100%;
+    transition: transform .2s .1s ease, opacity .2s .1s ease, visibility .3s ease;
+
+    // Arrows
+    &::before {
+        content: '';
+        position: absolute;
+        width: 0;
+        height: 0;
+        left: 50%;
+        transform: translateX(-50%);
     }
-    &--playing .plyr__controls [data-plyr='pause'] {
-        display: inline-block;
+    // The background triangle
+    &::before {
+        bottom: -@plyr-tooltip-arrow-size;
+        border-right: @plyr-tooltip-arrow-size solid transparent;
+        border-top: @plyr-tooltip-arrow-size solid @plyr-tooltip-bg;
+        border-left: @plyr-tooltip-arrow-size solid transparent;
+        z-index: 2;
     }
+}
+.plyr button:hover .plyr__tooltip,
+.plyr button.tab-focus:focus .plyr__tooltip,
+.plyr__tooltip--visible {
+    visibility: visible;
+    opacity: 1;
+    transform: translate(-50%, 0) scale(1);
+}
+.plyr button:hover .plyr__tooltip {
+    z-index: 3;
+}
 
-    // Volume control
-    // <input[type='range']> element
-    // Specificity is for bootstrap compatibility
-    &__volume[type='range'] {
-        display: inline-block;
-        vertical-align: middle;
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        width: 100px;
-        margin: 0 @plyr-control-spacing 0 0;
-        padding: 0;
-        cursor: pointer;
-        background: transparent;
-        border: none;
+// Playback progress
+// --------------------------------------------------------------
+// <progress> element
+.plyr__progress {
+    position: relative;
+    flex: 1;
+
+    input[type="range"] {
+        position: relative;
+        z-index: 2;
 
-        // Webkit
         &::-webkit-slider-runnable-track {
-            .volume-track();
-        }
-        &::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            margin-top: -((@plyr-volume-thumb-height - @plyr-volume-track-height) / 2);
-            .volume-thumb();
+            background: transparent;
         }
-
-        // Mozilla
         &::-moz-range-track {
-            .volume-track();
-        }
-        &::-moz-range-thumb {
-            .volume-thumb();
-        }
-
-        // Microsoft
-        &::-ms-track {
-            height: @plyr-volume-track-height;
             background: transparent;
-            border-color: transparent;
-            border-width: ((@plyr-volume-thumb-height - @plyr-volume-track-height) / 2) 0;
-            color: transparent;
         }
         &::-ms-fill-lower,
         &::-ms-fill-upper {
-            .volume-track();
-        }
-        &::-ms-thumb {
-            .volume-thumb();
+            background: transparent;
         }
+    }
 
-        &:focus {
-            outline: 0;
-
-            &::-webkit-slider-thumb {
-                background: @plyr-volume-thumb-bg-focus;
-            }
-            &::-moz-range-thumb {
-                background: @plyr-volume-thumb-bg-focus;
-            }
-            &::-ms-thumb {
-                background: @plyr-volume-thumb-bg-focus;
-            }
-        }
+    // Seek tooltip to show time
+    .plyr__tooltip {
+        left: 0;
     }
+}
 
-    // Hide sound controls on iOS
-    // It's not supported to change volume using JavaScript:
-    // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
-    &--is-ios &__volume,
-    &--is-ios [data-plyr='mute'],
-    &--is-ios.plyr--audio &__controls--right {
-        display: none;
+.plyr__progress--buffer[value],
+.plyr__progress--played[value] {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    width: 100%;
+    height: @range-track-height;
+    margin: -(@range-track-height / 2) 0 0;
+    padding: 0;
+    vertical-align: top;
+    appearance: none;
+    border: none;
+    border-radius: 100px;
+
+    &::-webkit-progress-bar {
+        background: transparent;
     }
-    // Center buttons so it looks less odd
-    &--is-ios.plyr--audio &__controls--left {
-        float: none;
+    &::-webkit-progress-value {
+        background: currentColor;
+        border-radius: 100px;
+        min-width: @range-track-height;
     }
-
-    // Audio specific styles
-    // Position the progress within the container
-    &--audio .plyr__controls {
-        padding-top: (@plyr-control-spacing * 2);
+    &::-moz-progress-bar {
+        background: currentColor;
+        border-radius: 100px;
+        min-width: @range-track-height;
     }
-    &--audio .plyr__progress {
-        bottom: auto;
-        top: 0;
-        background: @plyr-off-white;
+    &::-ms-fill {
+        border-radius: 100px;
     }
+}
+.plyr__progress--played[value] {
+    z-index: 1;
+    color: @plyr-progress-playing-bg;
+    background: transparent;
 
-    // Full screen mode
-    &.plyr--fullscreen,
-    &--fullscreen-active {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        height: 100%;
-        width: 100%;
-        z-index: 10000000;
-        background: #000;
-
-        video {
-            height: 100%;
-        }
-        .plyr__video-wrapper {
-            height: 100%;
-            width: 100%;
-        }
-        .plyr__controls {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            right: 0;
-        }
+    &::-webkit-progress-value {
+        min-width: @range-track-height;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+    &::-moz-progress-bar {
+        min-width: @range-track-height;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+    &::-ms-fill {
+        min-width: @range-track-height;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
     }
+}
+.plyr__progress--buffer[value] {
+    color: @plyr-progress-buffered-bg;
+    background: @range-track-bg;
 
-    // Hide controls when playing in full screen
-    &--fullscreen-active.plyr--fullscreen--hide-controls.plyr--playing,
-    &.plyr--fullscreen.plyr--fullscreen--hide-controls.plyr--playing {
-        .plyr__controls {
-            transform: translateY(100%) translateY(@plyr-control-spacing / 2);
-            transition: transform .3s .2s ease;
-        }
-        .plyr__captions {
-            bottom: (@plyr-control-spacing / 2);
-            transition: bottom .3s .2s ease;
-        }
-        &.plyr--hover .plyr__controls {
-            transform: translateY(0);
-        }
+    &::-webkit-progress-value {
+        transition: width .2s ease;
     }
+    &::-moz-progress-bar {
+        transition: width .2s ease;
+    }    
+    &::-ms-fill {
+        transition: width .2s ease;
+    }            
+}
 
-    // Captions
-    &.plyr--fullscreen .plyr__captions,
-    &--fullscreen-active .plyr__captions,
-    &--fullscreen--hide-controls.plyr--fullscreen-active.plyr--playing.plyr--hover .plyr__captions {
-        top: auto;
-        bottom: 90px;
+// Loading state
+.plyr--loading .plyr__progress--buffer {
+    animation: plyr-progress 1s linear infinite;
+    background-size: @plyr-progress-loading-size @plyr-progress-loading-size;
+    background-repeat: repeat-x;
+    background-color: @plyr-progress-buffered-bg;
+    background-image: linear-gradient(
+        -45deg,
+        @plyr-progress-loading-bg 25%,
+        transparent 25%,
+        transparent 50%,
+        @plyr-progress-loading-bg 50%,
+        @plyr-progress-loading-bg 75%,
+        transparent 75%,
+        transparent);
+    color: transparent;
+}
 
-        @media (min-width: @plyr-bp-control-split) {
-            bottom: 60px;
-        }
-    }
+// Time
+// --------------------------------------------------------------
+.plyr__time {
+    display: inline-block;
+    vertical-align: middle;
+    font-size: @plyr-font-size-small;
+    line-height: .95;
+}
 
-    // Change icons on state change
-    &--fullscreen-active .icon--exit-fullscreen,
-    &--muted .plyr__controls .icon--muted,
-    &--captions-active .plyr__controls .icon--captions-on {
-        display: block;
+// Media duration hidden on small screens
+.plyr__time + .plyr__time {
+    display: none;
 
-        & + svg {
-            display: none;
-        }
+    @media (min-width: @plyr-bp-control-split) {
+        display: inline-block;
     }
 
-    // Some options are hidden by default
-    [data-plyr='captions'],
-    [data-plyr='fullscreen'] {
-        display: none;
+    // Add a slash in before
+    &::before {
+        content: '\2044';
+        margin-right: @plyr-control-spacing;
     }
-    &--captions-enabled [data-plyr='captions'],
-    &--fullscreen-enabled [data-plyr='fullscreen'] {
-        display: inline-block;
+}
+
+// Volume
+// --------------------------------------------------------------
+// <input[type='range']> element
+// Specificity is for bootstrap compatibility
+.plyr__volume[type='range'] {
+    max-width: 100px;
+}
+
+// Hide sound controls on iOS
+// It's not supported to change volume using JavaScript:
+// https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
+.plyr--is-ios .plyr__volume,
+.plyr--is-ios [data-plyr='mute'],
+.plyr--is-ios.plyr--audio .plyr__controls--right {
+    display: none;
+}
+// Center buttons so it looks less odd
+.plyr--is-ios.plyr--audio .plyr__controls--left {
+    float: none;
+}
+
+// Fullscreen
+// --------------------------------------------------------------
+.plyr--fullscreen,
+.plyr--fullscreen-active {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 100%;
+    width: 100%;
+    z-index: 10000000;
+    background: #000;
+
+    video {
+        height: 100%;
+    }
+    .plyr__video-wrapper {
+        height: 100%;
+        width: 100%;
+    }
+    .plyr__controls {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
     }
 }
diff --git a/src/sprite/icon-fast-forward.svg b/src/sprite/icon-fast-forward.svg
index 1cc67199..3ae96af6 100755..100644
--- a/src/sprite/icon-fast-forward.svg
+++ b/src/sprite/icon-fast-forward.svg
@@ -1,4 +1,7 @@
-<?xml version="1.0" encoding="utf-8"?>
-<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>
+<?xml version="1.0" encoding="utf-8"?>

+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

+	 width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">

+<polygon points="7,6.4 0,1 0,15 7,9.6 7,15 16,8 7,1 "/>

+</svg>

diff --git a/src/sprite/icon-pause.svg b/src/sprite/icon-pause.svg
index 7fb41105..db51a807 100644
--- a/src/sprite/icon-pause.svg
+++ b/src/sprite/icon-pause.svg
@@ -1,7 +1,8 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g transform="translate(2.000000, 2.000000)">
-        <path d="M0,2 L0,12 C5.24848613e-17,14 2,14 2,14 L4,14 C4,14 6,14 6,12 C6,11.786438 6,11.572876 6,11 L6,2 C6,3.17446247e-09 4,0 4,0 L2,0 C2,0 0,0 0,2 Z M2,2 L4,2 L4,12 L2,12 L2,2 Z"></path>
-        <path d="M8,2 L8,12 C8,14 10,14 10,14 L12,14 C12,14 14,14 14,12 C14,11.786438 14,11.572876 14,11 L14,2 C14,3.17446247e-09 12,0 12,0 L10,0 C10,0 8,0 8,2 Z M10,2 L12,2 L12,12 L10,12 L10,2 Z"></path>
-    </g>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>

+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

+	 width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">

+<path d="M5,1H2C1.4,1,1,1.4,1,2v12c0,0.6,0.4,1,1,1h3c0.6,0,1-0.4,1-1V2C6,1.4,5.6,1,5,1z"/>

+<path d="M14,1h-3c-0.6,0-1,0.4-1,1v12c0,0.6,0.4,1,1,1h3c0.6,0,1-0.4,1-1V2C15,1.4,14.6,1,14,1z"/>

+</svg>

diff --git a/src/sprite/icon-play.svg b/src/sprite/icon-play.svg
index 056b9f79..069af73c 100755..100644
--- a/src/sprite/icon-play.svg
+++ b/src/sprite/icon-play.svg
@@ -1,4 +1,7 @@
-<?xml version="1.0" encoding="utf-8"?>
-<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>
+<?xml version="1.0" encoding="utf-8"?>

+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

+	 width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">

+<path d="M13.6,7.2l-10-7C2.9-0.3,2,0.2,2,1v14c0,0.8,0.9,1.3,1.6,0.8l10-7C14.1,8.4,14.1,7.6,13.6,7.2z"/>

+</svg>

diff --git a/src/sprite/icon-rewind.svg b/src/sprite/icon-rewind.svg
index 661df0fd..fbc252d2 100644
--- a/src/sprite/icon-rewind.svg
+++ b/src/sprite/icon-rewind.svg
@@ -1,4 +1,7 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<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">
-	<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" transform="translate(9.000000, 10.000000) rotate(-180.000000) translate(-9.000000, -10.000000) "></path>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>

+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

+	 width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">

+<polygon points="9,1 0,8 9,15 9,9.6 16,15 16,1 9,6.4 "/>

+</svg>