Fix for iPad and YouTube issues

src/js/plyr.js

@@ -257,6 +257,7 @@
             isChrome:   isChrome,
             isSafari:   isSafari,
             isIos:      /(iPad|iPhone|iPod)/g.test(navigator.platform),
+            isIphone:   /(iPhone|iPod)/g.test(navigator.userAgent),
             isTouch:    'ontouchstart' in document.documentElement
         };
     }
@@ -3294,6 +3295,9 @@
                 // Replace the container with the original element provided
                 plyr.container.parentNode.replaceChild(original, plyr.container);
 
+                // Allow overflow (set on fullscreen)
+                document.body.style.overflow = '';
+
                 // Event
                 _triggerEvent(original, 'destroyed', true);
             }
@@ -3540,31 +3544,48 @@
         var browser     = _browserSniff(),
             isOldIE     = (browser.isIE && browser.version <= 9),
             isIos       = browser.isIos,
-            isIphone    = /iPhone|iPod/i.test(navigator.userAgent),
+            isIphone    = browser.isIphone,
-            audio       = !!document.createElement('audio').canPlayType,
+            audioSupport = !!document.createElement('audio').canPlayType,
-            video       = !!document.createElement('video').canPlayType,
+            videoSupport = !!document.createElement('video').canPlayType,
-            basic, full;
+            basic       = false,
+            full        = false;
 
         switch (type) {
             case 'video':
-                basic = video;
+                basic = videoSupport;
                 full  = (basic && (!isOldIE && !isIphone));
                 break;
 
             case 'audio':
-                basic = audio;
+                basic = audioSupport;
                 full  = (basic && !isOldIE);
                 break;
 
+            // Vimeo does not seem to be supported on iOS via API
+            // Issue raised https://github.com/vimeo/player.js/issues/87
             case 'vimeo':
-            case 'youtube':
-            case 'soundcloud':
                 basic = true;
                 full = (!isOldIE && !isIos);
                 break;
 
+            case 'youtube':
+                basic = true;
+                full = (!isOldIE && !isIos);
+
+                // YouTube seems to work on iOS 10+ on iPad
+                if (isIos && !isIphone && browser.version >= 10) {
+                    full = true;
+                }
+
+                break;
+
+            case 'soundcloud':
+                basic = true;
+                full  = (!isOldIE && !isIphone);
+                break;
+
             default:
-                basic = (audio && video);
+                basic = (audioSupport && videoSupport);
                 full  = (basic && !isOldIE);
         }
 

src/less/plyr.less

@@ -179,9 +179,10 @@
 .plyr__video-embed {
     padding-bottom: 56.25%; /* 16:9 */
     height: 0;
-    overflow: hidden;
+    border-radius: inherit;
 
-    // Require z-index to force border-radius
+    // Require overflow and z-index to force border-radius
+    overflow: hidden;
     z-index: 0;
 
     iframe {
@@ -192,7 +193,6 @@
         height: 100%;
         border: 0;
         user-select: none;
-        z-index: 1;
     }
 
     // Vimeo hack
@@ -341,6 +341,7 @@
     left: 0;
     right: 0;
     bottom: 0;
+    z-index: 2;
     padding: (@plyr-control-spacing * 5) @plyr-control-spacing @plyr-control-spacing;
     background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 50%));
     border-bottom-left-radius: inherit;
@@ -740,6 +741,10 @@
         height: 100%;
         width: 100%;
     }
+    .plyr__video-embed {
+        // Revert overflow change
+        overflow: visible;
+    }
     .plyr__controls {
         position: absolute;
         bottom: 0;

src/scss/plyr.scss

@@ -178,10 +178,10 @@
 .plyr__video-embed {
     padding-bottom: 56.25%; /* 16:9 */
     height: 0;
-    overflow: hidden;
     border-radius: inherit;
 
-    // Require z-index to force border-radius
+    // Require overflow and z-index to force border-radius
+    overflow: hidden;
     z-index: 0;
 
     iframe {
@@ -738,6 +738,10 @@
         height: 100%;
         width: 100%;
     }
+    .plyr__video-embed {
+        // Revert overflow change
+        overflow: visible;
+    }
     .plyr__controls {
         position: absolute;
         bottom: 0;