v2.0.8

- Added `isPaused()` API method (thanks to @darrena092)
- Allowed `.on()` API method to be chainable (thanks to @gurupras) (fixes #357)
- Improved the "awful" rendering of captions on small screens in fullscreen mode (fixes #390)
- Fix for Firefox VTT compatibility (thanks to @magourex)
- Fix for Firefox Developer Edition blank video due to `-webkit-mask-image` issue (fixes #392)
- Added Issue and PR templates with the aim of reducing duplicate or duff issues

.github/issue_template.md

@@ -0,0 +1,18 @@
+- [ ] Issue does not already exist
+- [ ] Issue observed on https://plyr.io
+
+### Expected behaviour 
+
+### Actual behaviour
+
+### Environment
+
+- Browser:
+- Version:  
+- Operating System:
+- Version: 
+
+### Steps to reproduce 
+- 
+
+### Relevant links

.github/pull_request_template.md

@@ -0,0 +1,8 @@
+### Link to related issue (if applicable) 
+
+### Sumary of proposed changes 
+
+### Task list
+
+- [ ] Tested on [supported browsers](https://github.com/Selz/plyr#browser-support)
+- [ ] Gulp build completed 

.jsbeautifyrc

@@ -0,0 +1,11 @@
+{
+    "html": {
+        "allowed_file_extensions": []
+    },
+    "css": {
+        "allowed_file_extensions": []
+    },
+    "js": {
+        "allowed_file_extensions": []
+    }
+}

changelog.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## v2.0.8
+- Added `isPaused()` API method (thanks to @darrena092)
+- Allowed `.on()` API method to be chainable (thanks to @gurupras) (fixes #357)
+- Improved the "awful" rendering of captions on small screens in fullscreen mode (fixes #390)
+- Fix for Firefox VTT compatibility (thanks to @magourex)
+- Fix for Firefox Developer Edition blank video due to `-webkit-mask-image` issue (fixes #392)
+- Added Issue and PR templates with the aim of reducing duplicate or duff issues
+
+## v2.0.7
+- Fixed `getCurrentTime()` method (fixes #351)
+- Added `getVolume()` , `isMuted()` and `getDuration()` API methods (fixes #346)
+
 ## v2.0.6
 - Fixed merge issue with `Updated define to work with AMD imports #326` PR
 - Code formatting 

demo/dist/demo.js

@@ -1 +1 @@
-"document"in self&&("classList"in document.createElement("_")?!function(){"use strict";var e=document.createElement("_");if(e.classList.add("c1","c2"),!e.classList.contains("c2")){var t=function(e){var t=DOMTokenList.prototype[e];DOMTokenList.prototype[e]=function(e){var i,s=arguments.length;for(i=0;s>i;i++)e=arguments[i],t.call(this,e)}};t("add"),t("remove")}if(e.classList.toggle("c3",!1),e.classList.contains("c3")){var i=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(e,t){return 1 in arguments&&!this.contains(e)==!t?t:i.call(this,e)}}e=null}():!function(e){"use strict";if("Element"in e){var t="classList",i="prototype",s=e.Element[i],o=Object,n=String[i].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[i].indexOf||function(e){for(var t=0,i=this.length;i>t;t++)if(t in this&&this[t]===e)return t;return-1},a=function(e,t){this.name=e,this.code=DOMException[e],this.message=t},c=function(e,t){if(""===t)throw new a("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(t))throw new a("INVALID_CHARACTER_ERR","String contains an invalid character");return r.call(e,t)},l=function(e){for(var t=n.call(e.getAttribute("class")||""),i=t?t.split(/\s+/):[],s=0,o=i.length;o>s;s++)this.push(i[s]);this._updateClassName=function(){e.setAttribute("class",this.toString())}},u=l[i]=[],d=function(){return new l(this)};if(a[i]=Error[i],u.item=function(e){return this[e]||null},u.contains=function(e){return e+="",-1!==c(this,e)},u.add=function(){var e,t=arguments,i=0,s=t.length,o=!1;do e=t[i]+"",-1===c(this,e)&&(this.push(e),o=!0);while(++i<s);o&&this._updateClassName()},u.remove=function(){var e,t,i=arguments,s=0,o=i.length,n=!1;do for(e=i[s]+"",t=c(this,e);-1!==t;)this.splice(t,1),n=!0,t=c(this,e);while(++s<o);n&&this._updateClassName()},u.toggle=function(e,t){e+="";var i=this.contains(e),s=i?t!==!0&&"remove":t!==!1&&"add";return s&&this[s](e),t===!0||t===!1?t:!i},u.toString=function(){return this.join(" ")},o.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{o.defineProperty(s,t,p)}catch(h){-2146823252===h.number&&(p.enumerable=!1,o.defineProperty(s,t,p))}}else o[i].__defineGetter__&&s.__defineGetter__(t,d)}}(self)),function(){function e(e,t,i){if(e)if(e.classList)e.classList[i?"add":"remove"](t);else{var s=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=s+(i?" "+t:"")}}function t(t,i){if(t in n&&(i||t!=r)&&(r.length||t!=n.video)){switch(t){case n.video:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"},{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm",type:"video/webm"}],poster:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt","default":!0}]});break;case n.audio:s.source({type:"audio",title:"Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;",sources:[{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]});break;case n.youtube:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case n.vimeo:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"143418951",type:"vimeo"}]})}r=t;for(var a=o.length-1;a>=0;a--)e(o[a].parentElement,"active",!1);e(document.querySelector('[data-source="'+t+'"]').parentElement,"active",!0)}}var i=plyr.setup({debug:!0,title:"Video demo",iconUrl:"../dist/plyr.svg",tooltips:{controls:!0},captions:{defaultActive:!0}});plyr.loadSprite("dist/demo.svg");for(var s=i[0],o=document.querySelectorAll("[data-source]"),n={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},r=window.location.hash.replace("#",""),a=window.history&&window.history.pushState,c=o.length-1;c>=0;c--)o[c].addEventListener("click",function(){var e=this.getAttribute("data-source");t(e),a&&history.pushState({type:e},"","#"+e)});if(window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),a){var l=!r.length;l&&(r=n.video),r in n&&history.replaceState({type:r},"",l?"":"#"+r),r!==n.video&&t(r,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,i,s,o,n,r){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,n=t.createElement(i),r=t.getElementsByTagName(i)[0],n.async=1,n.src=s,r.parentNode.insertBefore(n,r)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));
+"document"in self&&("classList"in document.createElement("_")?!function(){"use strict";var e=document.createElement("_");if(e.classList.add("c1","c2"),!e.classList.contains("c2")){var t=function(e){var t=DOMTokenList.prototype[e];DOMTokenList.prototype[e]=function(e){var i,s=arguments.length;for(i=0;i<s;i++)e=arguments[i],t.call(this,e)}};t("add"),t("remove")}if(e.classList.toggle("c3",!1),e.classList.contains("c3")){var i=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(e,t){return 1 in arguments&&!this.contains(e)==!t?t:i.call(this,e)}}e=null}():!function(e){"use strict";if("Element"in e){var t="classList",i="prototype",s=e.Element[i],o=Object,n=String[i].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[i].indexOf||function(e){for(var t=0,i=this.length;t<i;t++)if(t in this&&this[t]===e)return t;return-1},a=function(e,t){this.name=e,this.code=DOMException[e],this.message=t},c=function(e,t){if(""===t)throw new a("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(t))throw new a("INVALID_CHARACTER_ERR","String contains an invalid character");return r.call(e,t)},l=function(e){for(var t=n.call(e.getAttribute("class")||""),i=t?t.split(/\s+/):[],s=0,o=i.length;s<o;s++)this.push(i[s]);this._updateClassName=function(){e.setAttribute("class",this.toString())}},u=l[i]=[],d=function(){return new l(this)};if(a[i]=Error[i],u.item=function(e){return this[e]||null},u.contains=function(e){return e+="",c(this,e)!==-1},u.add=function(){var e,t=arguments,i=0,s=t.length,o=!1;do e=t[i]+"",c(this,e)===-1&&(this.push(e),o=!0);while(++i<s);o&&this._updateClassName()},u.remove=function(){var e,t,i=arguments,s=0,o=i.length,n=!1;do for(e=i[s]+"",t=c(this,e);t!==-1;)this.splice(t,1),n=!0,t=c(this,e);while(++s<o);n&&this._updateClassName()},u.toggle=function(e,t){e+="";var i=this.contains(e),s=i?t!==!0&&"remove":t!==!1&&"add";return s&&this[s](e),t===!0||t===!1?t:!i},u.toString=function(){return this.join(" ")},o.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{o.defineProperty(s,t,p)}catch(e){e.number===-2146823252&&(p.enumerable=!1,o.defineProperty(s,t,p))}}else o[i].__defineGetter__&&s.__defineGetter__(t,d)}}(self)),function(){function e(e,t,i){if(e)if(e.classList)e.classList[i?"add":"remove"](t);else{var s=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=s+(i?" "+t:"")}}function t(t,i){if(t in n&&(i||t!=r)&&(r.length||t!=n.video)){switch(t){case n.video:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"},{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm",type:"video/webm"}],poster:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt",default:!0}]});break;case n.audio:s.source({type:"audio",title:"Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;",sources:[{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]});break;case n.youtube:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case n.vimeo:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"143418951",type:"vimeo"}]})}r=t;for(var a=o.length-1;a>=0;a--)e(o[a].parentElement,"active",!1);e(document.querySelector('[data-source="'+t+'"]').parentElement,"active",!0)}}var i=plyr.setup({debug:!0,title:"Video demo",iconUrl:"../dist/plyr.svg",tooltips:{controls:!0},captions:{defaultActive:!0}});plyr.loadSprite("dist/demo.svg");for(var s=i[0],o=document.querySelectorAll("[data-source]"),n={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},r=window.location.hash.replace("#",""),a=window.history&&window.history.pushState,c=o.length-1;c>=0;c--)o[c].addEventListener("click",function(){var e=this.getAttribute("data-source");t(e),a&&history.pushState({type:e},"","#"+e)});if(window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),a){var l=!r.length;l&&(r=n.video),r in n&&history.replaceState({type:r},"",l?"":"#"+r),r!==n.video&&t(r,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,i,s,o,n,r){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,n=t.createElement(i),r=t.getElementsByTagName(i)[0],n.async=1,n.src=s,r.parentNode.insertBefore(n,r)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));

demo/error.html

@@ -6,7 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
         <!-- Docs styles -->
-        <link rel="stylesheet" href="dist/docs.css">
+        <link rel="stylesheet" href="dist/demo.css">
     </head>
     <body>
         <main>

gulpfile.js

@@ -245,15 +245,15 @@ options = {
 // If aws is setup
 if("cdn" in aws) {
     var regex       = "(?:0|[1-9][0-9]*)\\.(?:0|[1-9][0-9]*)\.(?:0|[1-9][0-9]*)(?:-[\\da-z\\-]+(?:\.[\\da-z\\-]+)*)?(?:\\+[\\da-z\\-]+(?:\.[\\da-z\\-]+)*)?",
-    cdnpath         = new RegExp(aws.cdn.bucket + "\/" + regex, "gi"),
+    cdnpath         = new RegExp(aws.cdn.domain + "\/" + regex, "gi"),
     semver          = new RegExp("v" + regex, "gi"),
     localPath       = new RegExp("(\.\.\/)?dist", "gi"),
-    versionPath     = "https://" + aws.cdn.bucket + "/" + version;
+    versionPath     = "https://" + aws.cdn.domain + "/" + version;
 }
 
 // Publish version to CDN bucket
 gulp.task("cdn", function () {
-    console.log("Uploading " + version + " to " + aws.cdn.bucket + "...");
+    console.log("Uploading " + version + " to " + aws.cdn.domain + "...");
 
     // Upload to CDN
     return gulp.src(paths.upload)
@@ -270,17 +270,17 @@ gulp.task("cdn", function () {
 
 // Publish to demo bucket
 gulp.task("demo", function () {
-    console.log("Uploading " + version + " demo to " + aws.demo.bucket + "...");
+    console.log("Uploading " + version + " demo to " + aws.demo.domain + "...");
 
     // Replace versioned files in readme.md
     gulp.src([root + "/readme.md"])
-        .pipe(replace(cdnpath, aws.cdn.bucket + "/" + version))
+        .pipe(replace(cdnpath, aws.cdn.domain + "/" + version))
         .pipe(gulp.dest(root));
 
     // Replace versioned files in plyr.js
     gulp.src(path.join(root, "src/js/plyr.js"))
         .pipe(replace(semver, "v" + version))
-        .pipe(replace(cdnpath, aws.cdn.bucket + "/" + version))
+        .pipe(replace(cdnpath, aws.cdn.domain + "/" + version))
         .pipe(gulp.dest(path.join(root, "src/js/")));
 
     // Replace local file paths with remote paths in demo HTML
@@ -320,14 +320,14 @@ gulp.task("symlinks", function () {
 
 // Open the demo site to check it's sweet
 gulp.task("open", function () {
-    console.log("Opening " + aws.demo.bucket + "...");
+    console.log("Opening " + aws.demo.domain + "...");
 
     // A file must be specified or gulp will skip the task
     // Doesn't matter which file since we set the URL above
     // Weird, I know...
     return gulp.src([paths.demo.root + "index.html"])
         .pipe(open("", {
-            url: "http://" + aws.demo.bucket
+            url: "http://" + aws.demo.domain
         }));
 });
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "plyr",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
   "homepage": "http://plyr.io",
   "main": "src/js/plyr.js",

readme.md

@@ -122,7 +122,7 @@ Include the `plyr.js` script before the closing `</body>` tag and then call `ply
 If you want to use our CDN for the JavaScript, you can use the following:
 
 ```html
-<script src="https://cdn.plyr.io/2.0.6/plyr.js"></script>
+<script src="https://cdn.plyr.io/2.0.8/plyr.js"></script>
 ```
 
 ### CSS
@@ -135,11 +135,11 @@ Include the `plyr.css` stylsheet into your `<head>`
 If you want to use our CDN for the default CSS, you can use the following:
 
 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/2.0.6/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/2.0.8/plyr.css">
 ```
 
 ### SVG Sprite
-The SVG sprite is loaded automatically from our CDN. To change this, see the [options](#Options) below. For reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/2.0.6/plyr.svg`.
+The SVG sprite is loaded automatically from our CDN. To change this, see the [options](#Options) below. For reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/2.0.8/plyr.svg`.
 
 ## Advanced
 
@@ -492,7 +492,7 @@ Here's a list of the methods supported:
   <tr>
     <td><code>on()</code></td>
     <td>String, Function</td>
-    <td>Watch for an event (first argument) and run a callback function (second argument). This saves you doing your own <code>addEventListner</code> code.</td>
+    <td>Watch for an event (first argument) and run a callback function (second argument). This saves you doing your own <code>addEventListner</code> code. This is chainable.</td>
   </tr>
   <tr>
     <td><code>play()</code></td>
@@ -529,6 +529,26 @@ Here's a list of the methods supported:
     <td>Number</td>
     <td>Seeks the media to the provided parameter, time in seconds.</td>
   </tr>
+  <tr>
+    <td><code>getCurrentTime()</code></td>
+    <td>&mdash;</td>
+    <td>Will return a float with the current time in seconds.</td>
+  </tr>
+  <tr>
+    <td><code>getDuration()</code></td>
+    <td>&mdash;</td>
+    <td>Will return a float with the duration in seconds.</td>
+  </tr>
+  <tr>
+    <td><code>getVolume()</code></td>
+    <td>&mdash;</td>
+    <td>Will return a float between 0 and 1 for the current volume level.</td>
+  </tr>
+  <tr>
+    <td><code>isMuted()</code></td>
+    <td>&mdash;</td>
+    <td>Will return a boolean for whether the media is currently muted.</td>
+  </tr>
   <tr>
     <td><code>setVolume(...)</code></td>
     <td>Number</td>
@@ -539,6 +559,11 @@ Here's a list of the methods supported:
     <td>Boolean</td>
     <td>Toggles playback for the player based on either the boolean argument or it's current state.</td>
   </tr>
+  <tr>
+    <td><code>isPaused()</code></td>
+    <td>&mdash;</td>
+    <td>Will return a boolean for whether the media is currently paused.</td>
+  </tr>
   <tr>
     <td><code>toggleMute()</code></td>
     <td>&mdash;</td>
@@ -590,11 +615,6 @@ Here's a list of the methods supported:
     <td>&mdash;</td>
     <td>Restores the original element, reversing the effects of <code>setup()</code>.</td>
   </tr>
-  <tr>
-    <td><code>getCurrentTime()</code></td>
-    <td>&mdash;</td>
-    <td>Will return a float with the current time in seconds.</td>
-  </tr>
  </tbody>
 </table>
 

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v2.0.6
+// plyr.js v2.0.8
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -43,7 +43,7 @@
         displayDuration:        true,
         loadSprite:             true,
         iconPrefix:             'plyr',
-        iconUrl:                'https://cdn.plyr.io/2.0.6/plyr.svg',
+        iconUrl:                'https://cdn.plyr.io/2.0.8/plyr.svg',
         clickToPlay:            true,
         hideControls:           true,
         showPosterOnEnd:        false,
@@ -1025,15 +1025,26 @@
                                     var captions = [],
                                         caption,
                                         req = xhr.responseText;
-
+                                    
-                                    captions = req.split('\n\n');
+                                    //According to webvtt spec, line terminator consists of one of the following
+                                    // CRLF (U+000D U+000A), LF (U+000A) or CR (U+000D)
+                                    var lineSeparator = '\r\n';
+                                    if(req.indexOf(lineSeparator+lineSeparator) === -1) {
+                                        if(req.indexOf('\r\r') !== -1){
+                                            lineSeparator = '\r';
+                                        } else {
+                                            lineSeparator = '\n';
+                                        }
+                                    }
+                                    
+                                    captions = req.split(lineSeparator+lineSeparator);
 
                                     for (var r = 0; r < captions.length; r++) {
                                         caption = captions[r];
                                         plyr.captions[r] = [];
 
                                         // Get the parts of the captions
-                                        var parts = caption.split('\n'),
+                                        var parts = caption.split(lineSeparator),
                                             index = 0;
 
                                         // Incase caption numbers are added
@@ -2205,7 +2216,9 @@
             }
 
             // Toggle muted state
-            if (plyr.media.muted && volume > 0) {
+            if (volume === 0) {
+                plyr.media.muted = true;
+            } else if (plyr.media.muted && volume > 0) {
                 _toggleMute();
             }
         }
@@ -3381,9 +3394,14 @@
             getEmbed:           function() { return plyr.embed; },
             getMedia:           function() { return plyr.media; },
             getType:            function() { return plyr.type; },
+            getDuration:        _getDuration,
+            getCurrentTime:     function() { return plyr.media.currentTime; },
+            getVolume:          function() { return plyr.media.volume; },
+            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(); },
@@ -3401,8 +3419,7 @@
             toggleControls:     _toggleControls,
             isFullscreen:       function() { return plyr.isFullscreen || false; },
             support:            function(mimeType) { return _supportMime(plyr, mimeType); },
-            destroy:            _destroy,
+            destroy:            _destroy
-            getCurrentTime:     function() { return media.currentTime; }
         };
 
         // Everything done

src/less/plyr.less

@@ -173,9 +173,6 @@
     position: relative;
     background: #000;
     border-radius: inherit;
-
-    // Cleaner radius, also forces iframe radius
-    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
 }
 
 // Container for embeds
@@ -184,6 +181,9 @@
     height: 0;
     overflow: hidden;
 
+    // Require z-index to force border-radius
+    z-index: 0;
+
     iframe {
         position: absolute;
         top: 0;
@@ -192,6 +192,7 @@
         height: 100%;
         border: 0;
         user-select: none;
+        z-index: 1;
     }
 
     // Vimeo hack
@@ -244,12 +245,15 @@
 .plyr--captions-active .plyr__captions {
     display: block;
 }
-.plyr--fullscreen-active .plyr__captions {
-    font-size: @plyr-font-size-captions-large;
-}
 .plyr--hide-controls .plyr__captions {
     transform: translateY(-(@plyr-control-spacing * 1.5));
 }
+// Large captions in full screen on larger screens
+@media (min-width: @plyr-bp-screen-lg) {
+    .plyr--fullscreen-active .plyr__captions {
+        font-size: @plyr-font-size-captions-large;
+    }
+}
 
 // Controls
 // --------------------------------------------------------------

src/less/variables.less

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

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

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;
+$plyr-bp-screen-md:                     768px !default;
+$plyr-bp-screen-lg:                     1024px !default;