Froogaloop fixes (custom version), docs sprite, source api changes

docs/dist/docs.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 n,i=arguments.length;for(n=0;i>n;n++)e=arguments[n],t.call(this,e)}};t("add"),t("remove")}if(e.classList.toggle("c3",!1),e.classList.contains("c3")){var n=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(e,t){return 1 in arguments&&!this.contains(e)==!t?t:n.call(this,e)}}e=null}():!function(e){"use strict";if("Element"in e){var t="classList",n="prototype",i=e.Element[n],s=Object,o=String[n].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[n].indexOf||function(e){for(var t=0,n=this.length;n>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=o.call(e.getAttribute("class")||""),n=t?t.split(/\s+/):[],i=0,s=n.length;s>i;i++)this.push(n[i]);this._updateClassName=function(){e.setAttribute("class",this.toString())}},u=l[n]=[],d=function(){return new l(this)};if(a[n]=Error[n],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,n=0,i=t.length,s=!1;do e=t[n]+"",-1===c(this,e)&&(this.push(e),s=!0);while(++n<i);s&&this._updateClassName()},u.remove=function(){var e,t,n=arguments,i=0,s=n.length,o=!1;do for(e=n[i]+"",t=c(this,e);-1!==t;)this.splice(t,1),o=!0,t=c(this,e);while(++i<s);o&&this._updateClassName()},u.toggle=function(e,t){e+="";var n=this.contains(e),i=n?t!==!0&&"remove":t!==!1&&"add";return i&&this[i](e),t===!0||t===!1?t:!n},u.toString=function(){return this.join(" ")},s.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{s.defineProperty(i,t,p)}catch(h){-2146823252===h.number&&(p.enumerable=!1,s.defineProperty(i,t,p))}}else s[n].__defineGetter__&&i.__defineGetter__(t,d)}}(self)),plyr.setup(".js-media-player",{debug:!0,title:"Video demo",tooltips:!0,captions:{defaultActive:!0},onSetup:function(){console.log("✓ Setup done")}}),shr.setup({count:{classname:"btn__count"}}),function(){function e(){var e=this,n=e.getAttribute("data-source"),i=document.querySelector(".js-media-player").plyr;switch(n){case"video":i.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.0/example_captions_en.vtt","default":!0}]});break;case"audio":i.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"youtube":i.source({type:"youtube",title:"View From A Blue Moon",sources:"bTqVqk7FSmY"});break;case"vimeo":i.source({type:"vimeo",title:"View From A Blue Moon",sources:"143418951"})}for(var s=t.length-1;s>=0;s--)t[s].classList.remove("btn--active");event.target.classList.add("btn--active")}for(var t=document.querySelectorAll("[data-source]"),n=t.length-1;n>=0;n--)t[n].addEventListener("click",e)}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,n,i,s,o,r){e.GoogleAnalyticsObject=s,e[s]=e[s]||function(){(e[s].q=e[s].q||[]).push(arguments)},e[s].l=1*new Date,o=t.createElement(n),r=t.getElementsByTagName(n)[0],o.async=1,o.src=i,r.parentNode.insertBefore(o,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 n,i=arguments.length;for(n=0;i>n;n++)e=arguments[n],t.call(this,e)}};t("add"),t("remove")}if(e.classList.toggle("c3",!1),e.classList.contains("c3")){var n=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(e,t){return 1 in arguments&&!this.contains(e)==!t?t:n.call(this,e)}}e=null}():!function(e){"use strict";if("Element"in e){var t="classList",n="prototype",i=e.Element[n],s=Object,o=String[n].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[n].indexOf||function(e){for(var t=0,n=this.length;n>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=o.call(e.getAttribute("class")||""),n=t?t.split(/\s+/):[],i=0,s=n.length;s>i;i++)this.push(n[i]);this._updateClassName=function(){e.setAttribute("class",this.toString())}},u=l[n]=[],p=function(){return new l(this)};if(a[n]=Error[n],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,n=0,i=t.length,s=!1;do e=t[n]+"",-1===c(this,e)&&(this.push(e),s=!0);while(++n<i);s&&this._updateClassName()},u.remove=function(){var e,t,n=arguments,i=0,s=n.length,o=!1;do for(e=n[i]+"",t=c(this,e);-1!==t;)this.splice(t,1),o=!0,t=c(this,e);while(++i<s);o&&this._updateClassName()},u.toggle=function(e,t){e+="";var n=this.contains(e),i=n?t!==!0&&"remove":t!==!1&&"add";return i&&this[i](e),t===!0||t===!1?t:!n},u.toString=function(){return this.join(" ")},s.defineProperty){var d={get:p,enumerable:!0,configurable:!0};try{s.defineProperty(i,t,d)}catch(m){-2146823252===m.number&&(d.enumerable=!1,s.defineProperty(i,t,d))}}else s[n].__defineGetter__&&i.__defineGetter__(t,p)}}(self)),plyr.setup(".js-media-player",{debug:!0,title:"Video demo",tooltips:!0,captions:{defaultActive:!0},onSetup:function(){console.log("✓ Setup done")}}),shr.setup({count:{classname:"btn__count"}}),function(){function e(){var e=this,n=e.getAttribute("data-source"),i=document.querySelector(".js-media-player").plyr;switch(n){case"video":i.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.0/example_captions_en.vtt","default":!0}]});break;case"audio":i.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"youtube":i.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case"vimeo":i.source({type:"video",title:"View From A Blue Moon",sources:[{src:"143418951",type:"vimeo"}]})}for(var s=t.length-1;s>=0;s--)t[s].parentElement.classList.remove("active");event.target.parentElement.classList.add("active")}for(var t=document.querySelectorAll("[data-source]"),n=t.length-1;n>=0;n--)t[n].addEventListener("click",e)}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,n,i,s,o,r){e.GoogleAnalyticsObject=s,e[s]=e[s]||function(){(e[s].q=e[s].q||[]).push(arguments)},e[s].l=1*new Date,o=t.createElement(n),r=t.getElementsByTagName(n)[0],o.async=1,o.src=i,r.parentNode.insertBefore(o,r)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));

docs/index.html

@@ -13,7 +13,7 @@
         <!-- Docs styles -->
         <link rel="stylesheet" href="https://cdn.plyr.io/1.3.7/docs.css">
     </head>
-    <<body>
+    <body>
         <header>
             <h1>Plyr</h1>
             <p>A simple, accessible HTML5 media player by <a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a> from <a href="https://twitter.com/selz" target="_blank">@selz</a></p>
@@ -36,8 +36,8 @@
         <main role="main" id="main">
             <nav class="btn__bar">
                 <ul>
-                    <li>
+                    <li class="active">
-                        <button type="button" class="btn btn--active" data-source="video">Video</button>
+                        <button type="button" class="btn" data-source="video">Video</button>
                     </li>
                     <li>
                         <button type="button" class="btn" data-source="audio">Audio</button>
@@ -79,42 +79,23 @@
         <script>
         (function() {
             [
-                "https://cdn.shr.one/0.1.9/sprite.svg",
+                'https://cdn.plyr.io/1.3.7/sprite.svg',
-                "https://cdn.plyr.io/1.3.7/sprite.svg"
+                'https://cdn.plyr.io/1.3.7/docs.svg'
             ]
             .forEach(function(u) {
-                var x = new XMLHttpRequest(),
+                var x = new XMLHttpRequest(), b = document.body;
-                    b = document.body;
-
                 // Check for CORS support
-                // If you're loading from same domain, you can remove the if statement
+                // If you're loading from same domain, you can remove the whole if/else statement
                 // XHR for Chrome/Firefox/Opera/Safari
-                if ("withCredentials" in x) {
+                if ('withCredentials' in x) { x.open('GET', u, true); }
-                    x.open("GET", u, true);
-                }
                 // XDomainRequest for older IE
-                else if (typeof XDomainRequest != "undefined") {
+                else if (typeof XDomainRequest != 'undefined') { x = new XDomainRequest(); x.open('GET', u); }
-                    x = new XDomainRequest();
+                else { return; }
-                    x.open("GET", u);
-                }
-                else {
-                    return;
-                }
 
                 x.send();
-                x.onload = function() {
+                x.onload = function() { var c = document.createElement('div'); c.setAttribute('hidden', ''); c.innerHTML = x.responseText; b.insertBefore(c, b.childNodes[0]); }
-                    var c = document.createElement("div");
-                    c.setAttribute("hidden", "");
-                    c.innerHTML = x.responseText;
-                    b.insertBefore(c, b.childNodes[0]);
-                }
             });
         })();
-        // Load the plyr sprite
-        loadSprite(document, "../dist/sprite.svg");
-
-        // This is for the docs only
-        loadSprite(document, "dist/sprite.svg");
         </script>
 
         <!-- Plyr core script -->

docs/src/js/docs.js

@@ -80,26 +80,32 @@ shr.setup({
 
 			case 'youtube':
 				player.source({
-					type:       'youtube',
+					type:       'video',
 					title: 		'View From A Blue Moon',
-					sources:    'bTqVqk7FSmY'
+					sources: [{
+				        src:    'bTqVqk7FSmY',
+				        type:   'youtube'
+				    }]
 				});
 				break;
 
 			case 'vimeo':
 				player.source({
-					type:       'vimeo',
+					type:       'video',
 					title: 		'View From A Blue Moon',
-					sources:    '143418951'
+					sources: [{
+				        src:    '143418951',
+				        type:   'vimeo'
+				    }]
 				});
 				break;
 		}
 
 		for (var x = buttons.length - 1; x >= 0; x--) {
-			buttons[x].classList.remove('btn--active');
+			buttons[x].parentElement.classList.remove('active');
 		}
 
-		event.target.classList.add('btn--active');
+		event.target.parentElement.classList.add('active');
 	}
 })();
 

docs/src/less/components/buttons.less

@@ -55,12 +55,8 @@ nav {
 		& + li .btn {
 			margin-left: -1px;
 		}
-	}
+
-	.btn {
+		&.active .btn {
-		display: block;
-		border-radius: 0;
-	}
-	.btn--active {
 			&:extend(.btn--primary);
 			box-shadow: inset 0 1px 1px rgba(0,0,0, .2);
 			position: relative;
@@ -70,6 +66,20 @@ nav {
 				color: inherit;
 			}
 		}
+		&.active + li .btn:hover {
+			z-index: 0;
+		}
+	}
+	.btn {
+		position: relative;
+		display: block;
+		border-radius: 0;
+
+		&:hover,
+		&:focus {
+			z-index: 1;
+		}
+	}
 
 	@media (min-width: 560px) {
 		margin-bottom: (@padding-base * 2);

gulpfile.js

@@ -41,7 +41,8 @@ paths = {
         // Source paths
         src: {
             less:       path.join(root, "docs/src/less/**/*"),
-            js:         path.join(root, "docs/src/js/**/*")
+            js:         path.join(root, "docs/src/js/**/*"),
+            sprite:     path.join(root, "docs/src/sprite/**/*")
         },
         // Output paths
         output:         path.join(root, "docs/dist/"),
@@ -55,7 +56,8 @@ paths = {
 tasks = {
     less:   [],
     sass:   [],
-    js:     []
+    js:     [],
+    sprite: []
 },
 
 // Fetch bundles from JSON
@@ -128,17 +130,21 @@ var build = {
         }
     },
     sprite: function(bundle) {
+        var name = "sprite-" + bundle;
+        tasks.sprite.push(name);
+
         // Process Icons
-        gulp.task("sprite", function () {
+        gulp.task(name, function () {
             return gulp
-                .src(paths.plyr.src.sprite)
+                .src(paths[bundle].src.sprite)
                 .pipe(svgmin({
                     plugins: [{
                         removeDesc: true
                     }]
                 }))
                 .pipe(svgstore())
-                .pipe(gulp.dest(paths.plyr.output));
+                .pipe(rename({ basename: (bundle == "plyr" ? "sprite" : bundle) }))
+                .pipe(gulp.dest(paths[bundle].output));
         });
     }
 };
@@ -147,11 +153,12 @@ var build = {
 build.js(bundles.plyr.js, "plyr");
 build.less(bundles.plyr.less, "plyr");
 build.sass(bundles.plyr.sass, "plyr");
-build.sprite();
+build.sprite("plyr");
 
 // Docs files
 build.less(bundles.docs.less, "docs");
 build.js(bundles.docs.js, "docs");
+build.sprite("docs");
 
 // Build all JS
 gulp.task("js", function(){
@@ -168,16 +175,17 @@ gulp.task("watch", function () {
     // Plyr core
     gulp.watch(paths.plyr.src.js, tasks.js);
     gulp.watch(paths.plyr.src.less, tasks.less);
-    gulp.watch(paths.plyr.src.sprite, ["sprite-plyr"]);
+    gulp.watch(paths.plyr.src.sprite, tasks.sprite);
 
     // Docs
     gulp.watch(paths.docs.src.js, tasks.js);
     gulp.watch(paths.docs.src.less, tasks.less);
+    gulp.watch(paths.docs.src.sprite, tasks.sprite);
 });
 
 // Default gulp task
 gulp.task("default", function(){
-    run(tasks.js, tasks.less, "sprite", "watch");
+    run(tasks.js, tasks.less, tasks.sprite, "watch");
 });
 
 // Publish a version to CDN and docs
@@ -263,5 +271,5 @@ gulp.task("open", function () {
 
 // Do everything
 gulp.task("publish", function () {
-    run(tasks.js, tasks.less, "sprite", "cdn", "docs");
+    run(tasks.js, tasks.less, tasks.sprite, "cdn", "docs");
 });

readme.md

@@ -487,21 +487,21 @@ Video example:
 ```javascript
 player.source({
   type:       'video',
-  title:      'Bug Buck Bunny',
+  title:      'Example title',
   sources: [{
-      src:    'https://cdn.selz.com/plyr/1.0/movie.mp4',
+      src:    '/path/to/movie.mp4',
       type:   'video/mp4'
   },
   {
-      src:    'https://cdn.selz.com/plyr/1.0/movie.webm',
+      src:    '/path/to/movie.webm',
       type:   'video/webm'
   }],
-  poster:     'https://cdn.selz.com/plyr/1.0/poster.jpg',
+  poster:     '/path/to/poster.jpg',
   tracks:     [{
       kind:   'captions',
       label:  'English',
       srclang:'en',
-      src:    'https://cdn.selz.com/plyr/1.0/example_captions_en.vtt',
+      src:    '/path/to/captions.vtt',
       default: true
   }]
 });
@@ -512,13 +512,13 @@ Audio example:
 ```javascript
 player.source({
   type:       'audio',
-  title:      '96 by Logistics',
+  title:      'Example title',
   sources: [{
-    src:      'https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3',
+    src:      '/path/to/audio.mp3',
     type:     'audio/mp3'
   },
   {
-    src:      'https://cdn.selz.com/plyr/1.0/logistics-96-sample.ogg',
+    src:      '/path/to/audio.ogg',
     type:     'audio/ogg'
   }]
 });
@@ -528,9 +528,12 @@ YouTube example:
 
 ```javascript
 player.source({
-  type:       'youtube',
+  type:       'video',
-  title:      'Enovato interview of Dan Cederholm for Made By',
+  title:      'Example title',
-  sources:    'Au87oAJ2jeE'
+  sources: [{
+      src:    'bTqVqk7FSmY',
+      type:   'youtube'
+  }]
 });
 ```
 
@@ -539,8 +542,11 @@ Vimeo example
 ```javascript
 player.source({
   type:       'vimeo',
-  title:      'Yosemite HD II',
+  title:      'Example title',
-  sources:    '87701971'
+  sources: [{
+      src:    '143418951',
+      type:   'vimeo'
+  }]
 });
 ```
 

src/js/plyr.js

@@ -127,7 +127,7 @@
         },
         urls: {
             vimeo: {
-                api:            'https://f.vimeocdn.com/js/froogaloop2.min.js'
+                api:            'http://cdn.plyr.io/froogaloop/1.0.0/plyr.froogaloop.js',
             },
             youtube: {
                 api:            'https://www.youtube.com/iframe_api'
@@ -968,7 +968,7 @@
 
             // Embeds
             if (_inArray(config.types.embed, plyr.type)) {
-                _setupEmbed(plyr.embedId, plyr.type);
+                _setupEmbed();
 
                 // Clean up
                 plyr.embedId = null;
@@ -982,8 +982,9 @@
         }
 
         // Setup YouTube/Vimeo
-        function _setupEmbed(videoId) {
+        function _setupEmbed() {
             var container = document.createElement('div'),
+                videoId = plyr.embedId,
                 id = plyr.type + '-' + Math.floor(Math.random() * (10000));
 
             // Remove old containers
@@ -1013,7 +1014,15 @@
                     _injectScript(config.urls.youtube.api);
 
                     // Setup callback for the API
-                    window.onYouTubeIframeAPIReady = function () { _youTubeReady(videoId, container); };
+                    window.onYouTubeReadyCallbacks = window.onYouTubeReadyCallbacks || [];
+
+                    // Add to queue
+                    window.onYouTubeReadyCallbacks.push(function() { _youTubeReady(videoId, container) });
+
+                    // Set callback to process queue
+                    window.onYouTubeIframeAPIReady = function () {
+                        window.onYouTubeReadyCallbacks.forEach(function(callback) { callback(); });
+                    };
                 }
             }
             // Vimeo
@@ -1036,25 +1045,20 @@
                 container.appendChild(iframe);
                 plyr.media.appendChild(container);
 
-                // Setup API
-                if (typeof Froogaloop === 'function') {
-                    _on(iframe, 'load', _vimeoReady);
-                }
-                else {
                 // Load the API
+                if (!('$f' in window)) {
                     _injectScript(config.urls.vimeo.api);
+                }
 
                 // Wait for fragaloop load
                 var timer = window.setInterval(function() {
                     if ('$f' in window && iframe.loaded) {
                         window.clearInterval(timer);
-
                         _vimeoReady.call(iframe);
                     }
                 }, 50);
             }
         }
-        }
 
         // When embeds are ready
         function _embedReady() {
@@ -1096,7 +1100,8 @@
                     cc_lang_pref: 'en',
                     wmode: 'transparent',
                     modestbranding: 1,
-                    disablekb: 1
+                    disablekb: 1,
+                    origin: '*' // https://code.google.com/p/gdata-issues/issues/detail?id=5788#c45
                 },
                 events: {
                     'onReady': function(event) {
@@ -1914,7 +1919,8 @@
         // Update source
         // Sources are not checked for support so be careful
         function _updateSource(source) {
-            if (typeof source === 'undefined') {
+            if (typeof source === 'undefined' || !('sources' in source) || !source.sources.length) {
+                _log('Invalid source format', true);
                 return;
             }
 
@@ -1938,9 +1944,18 @@
             // Remove the old media
             _remove(plyr.media);
 
-            // Set the new type
+            // Set the type
-            if ('type' in source && source.type !== plyr.type) {
+            if ('type' in source) {
                 plyr.type = source.type;
+
+                // Get child type for video (it might be an embed)
+                if(plyr.type === 'video') {
+                    var firstSource = source.sources[0];
+
+                    if('type' in firstSource && _inArray(config.types.embed, firstSource.type)) {
+                        plyr.type = firstSource.type;
+                    }
+                }
             }
 
             // Create new markup
@@ -1956,7 +1971,7 @@
                 case 'youtube':
                 case 'vimeo':
                     plyr.media = document.createElement('div');
-                    plyr.embedId = (typeof source.sources === 'string' ? source.sources : source.sources[0].src);
+                    plyr.embedId = source.sources[0].src;
                     break;
             }
 
@@ -1989,11 +2004,6 @@
             // Autoplay the new source?
             config.autoplay = (source.autoplay || config.autoplay);
 
-            // Set media id for embeds
-            if (_inArray(config.types.embed, plyr.type)) {
-                plyr.embedId = source.sources;
-            }
-
             // Set new sources for html5
             if (_inArray(config.types.html5, plyr.type)) {
                 _insertChildElements('source', source.sources);
@@ -2085,6 +2095,11 @@
                 });
             }
 
+            // Messages
+            /*_on(window, 'message', function(event) {
+                _log(event);
+            });*/
+
             // Play
             _on(plyr.buttons.play, 'click', function() {
                 _play();

src/less/plyr.less

@@ -158,6 +158,11 @@
         box-sizing: border-box;
     }
 
+    // Fix 300ms delay
+    a, button, input, label {
+        touch-action: manipulation;
+    }
+
     // Screen reader only elements
     &__sr-only {
         position: absolute !important;
@@ -637,7 +642,7 @@
     }
 
     // Hide controls when playing in full screen
-    &--fullscreen--hide-controls&--fullscreen-active.plyr--playing {
+    &--fullscreen--hide-controls&--fullscreen-active&--playing {
         .plyr__controls {
             transform: translateY(100%) translateY(@control-spacing / 2);
             transition: transform .3s .2s ease;
@@ -654,7 +659,7 @@
     // Captions
     &--fullscreen .plyr__captions,
     &--fullscreen-active .plyr__captions,
-    &--fullscreen--hide-controls&--fullscreen-active&--playing&--hover .plyr__captions {
+    &--fullscreen--hide-controls&--fullscreen-active&--playing&--hover &__captions {
         top: auto;
         bottom: 90px;