Merge branch 'master' into develop

# Conflicts:
#	demo/dist/demo.js
#	dist/plyr.css
#	dist/plyr.js

5 files changed, 35 insertions, 17 deletions

diff --git a/src/js/plyr.js b/src/js/plyr.js
index f42e7641..7eb72067 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v2.0.7
+// plyr.js v2.0.9
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -45,7 +45,7 @@
         displayDuration:        true,
         loadSprite:             true,
         iconPrefix:             'plyr',
-        iconUrl:                'https://cdn.plyr.io/2.0.7/plyr.svg',
+        iconUrl:                'https://cdn.plyr.io/2.0.9/plyr.svg',
         clickToPlay:            true,
         hideControls:           true,
         showPosterOnEnd:        false,
@@ -1872,6 +1872,14 @@
                                     _triggerEvent(plyr.media, 'timeupdate');
                                 }, 100);
 
+                                // Check duration again due to YouTube bug
+                                // https://github.com/Selz/plyr/issues/374
+                                // https://code.google.com/p/gdata-issues/issues/detail?id=8690
+                                if (plyr.media.duration !== instance.getDuration()) {
+                                    plyr.media.duration = instance.getDuration();
+                                    _triggerEvent(plyr.media, 'durationchange');
+                                }
+
                                 break;
 
                             case 2:
@@ -3650,7 +3658,8 @@
             isMuted:            function() { return plyr.media.muted; },
             isReady:            function() { return _hasClass(plyr.container, config.classes.ready); },
             isLoading:          function() { return _hasClass(plyr.container, config.classes.loading); },
-            on:                 function(event, callback) { _on(plyr.container, event, callback); },
+            isPaused:           function() { return plyr.media.paused; }, 
+            on:                 function(event, callback) { _on(plyr.container, event, callback); return this; },
             play:               _play,
             pause:              _pause,
             stop:               function() { _pause(); _seek(); },
diff --git a/src/less/plyr.less b/src/less/plyr.less
index 5ba916cd..a23924e6 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -189,9 +189,6 @@
     position: relative;
     background: #000;
     border-radius: inherit;
-
-    // Cleaner radius, also forces iframe radius
-    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
 }
 
 // Container for embeds
@@ -200,6 +197,9 @@
     height: 0;
     overflow: hidden;
 
+    // Require z-index to force border-radius
+    z-index: 0;
+
     iframe {
         position: absolute;
         top: 0;
@@ -208,6 +208,7 @@
         height: 100%;
         border: 0;
         user-select: none;
+        z-index: 1;
     }
 
     // Vimeo hack
@@ -259,12 +260,15 @@
 .plyr--captions-active .plyr__captions {
     display: block;
 }
-.plyr--fullscreen-active .plyr__captions {
-    font-size: @plyr-font-size-captions-large;
-}
 .plyr--hide-controls .plyr__captions {
     transform: translateY(-(@plyr-control-spacing * 1.5));
 }
+// Large captions in full screen on larger screens
+@media (min-width: @plyr-bp-screen-lg) {
+    .plyr--fullscreen-active .plyr__captions {
+        font-size: @plyr-font-size-captions-large;
+    }
+}
 
 // Controls
 // --------------------------------------------------------------
diff --git a/src/less/variables.less b/src/less/variables.less
index bea9a0f7..0d528380 100644
--- a/src/less/variables.less
+++ b/src/less/variables.less
@@ -73,4 +73,5 @@
 
 // Breakpoints
 @plyr-bp-screen-sm:                     480px;
-@plyr-bp-screen-md:                     768px;
\ No newline at end of file
+@plyr-bp-screen-md:                     768px;
+@plyr-bp-screen-lg:                     1024px;
\ No newline at end of file
diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss
index 47917364..70518591 100644
--- a/src/scss/plyr.scss
+++ b/src/scss/plyr.scss
@@ -172,9 +172,6 @@
     position: relative;
     background: #000;
     border-radius: inherit;
-
-    // Cleaner radius, also forces iframe radius
-    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
 }
 
 // Container for embeds
@@ -184,6 +181,9 @@
     overflow: hidden;
     border-radius: inherit;
 
+    // Require z-index to force border-radius
+    z-index: 0;
+
     iframe {
         position: absolute;
         top: 0;
@@ -244,12 +244,15 @@
 .plyr--captions-active .plyr__captions {
     display: block;
 }
-.plyr--fullscreen-active .plyr__captions {
-    font-size: $plyr-font-size-captions-large;
-}
 .plyr--hide-controls .plyr__captions {
     transform: translateY(-($plyr-control-spacing * 2));
 }
+// Large captions in full screen on larger screens
+@media (min-width: $plyr-bp-screen-lg) {
+    .plyr--fullscreen-active .plyr__captions {
+        font-size: $plyr-font-size-captions-large;
+    }
+}
 
 // Controls
 // --------------------------------------------------------------
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
index 0bd31603..da75f11a 100644
--- a/src/scss/variables.scss
+++ b/src/scss/variables.scss
@@ -69,4 +69,5 @@ $plyr-range-selected-bg:                $plyr-color-main !default;
 
 // Breakpoints
 $plyr-bp-screen-sm:                     480px !default;
-$plyr-bp-screen-md:                     768px !default;
\ No newline at end of file
+$plyr-bp-screen-md:                     768px !default;
+$plyr-bp-screen-lg:                     1024px !default;
\ No newline at end of file