v2.0.11

Merge branch 'master' of https://github.com/Selz/plyr
Fix for iPad and YouTube issues
2016-11-27 20:18:30 +11:00 · 2016-11-27 20:15:19 +11:00 · 2016-11-27 20:15:15 +11:00 · 2016-11-18 09:40:34 +11:00 · 2016-11-17 15:43:26 +01:00 · 2016-11-16 09:41:06 +11:00
10 changed files with 155 additions and 116 deletions
--- a/changelog.md
+++ b/changelog.md
@ -1,5 +1,9 @@
 # Changelog

+## v2.0.11
+- Fix for `cleanUp` being called twice (thanks to @sebastiancarlsson)
+- Fix for YouTube controls on iPad (fixes #391)
+
 ## v2.0.10
 - Added seek event fixes for Vimeo and YouTube (fixes #409)
 - Added support for embed URLs rather than ID only (fixes #345)
--- a/demo/index.html
+++ b/demo/index.html
@ -51,7 +51,7 @@
                </ul>
            </nav>
            <section>
-                <video poster="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg" controls crossorigin>
+                <video poster="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg?v1" controls crossorigin>
                    <!-- Video files -->
                    <source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">
                    <source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm">
--- a/dist/plyr.css
+++ b/dist/plyr.css
--- a/dist/plyr.js
+++ b/dist/plyr.js
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "plyr",
-  "version": "2.0.10",
+  "version": "2.0.11",
  "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
  "homepage": "http://plyr.io",
  "main": "src/js/plyr.js",
--- a/readme.md
+++ b/readme.md
@ -31,11 +31,12 @@ Oh and yes, it works with Bootstrap.
 Check out the [changelog](changelog.md) to see what's new with Plyr.

 ## Features currently being developed
- Playback speed (#53)
- Quality selection (#218)
- Caption language selection (#385)
+- Playback speed selection
+- Quality selection 
+- Caption language selection
 - AirPlay
- Picture in Picture (MacOS Sierra + Safari) (#366)
+- Picture in Picture (MacOS Sierra + Safari)
+
 [more info](https://github.com/Selz/plyr/issues?q=is%3Aissue+is%3Aopen+label%3A%22In+Development%22)

 ## Planned features
@ -131,10 +132,10 @@ Include the `plyr.js` script before the closing `</body>` tag and then call `ply
 <script>plyr.setup();</script>
 ```

-If you want to use our CDN for the JavaScript, you can use the following:
+If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript, you can use the following:

 ```html
-<script src="https://cdn.plyr.io/2.0.10/plyr.js"></script>
+<script src="https://cdn.plyr.io/2.0.11/plyr.js"></script>
 ```

 ### CSS
@ -144,14 +145,14 @@ Include the `plyr.css` stylsheet into your `<head>`
 <link rel="stylesheet" href="path/to/plyr.css">
 ```

-If you want to use our CDN for the default CSS, you can use the following:
+If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:

 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/2.0.10/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/2.0.11/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.10/plyr.svg`.
+The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). 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.11/plyr.svg`.

 ## Advanced

@ -1066,5 +1067,7 @@ Also these links helped created Plyr:
 - [Media Events - W3.org](http://www.w3.org/2010/05/video/mediaevents.html)
 - [Styling the `<progress>` element - hongkiat.com](http://www.hongkiat.com/blog/html5-progress-bar/)

+Thanks to [Fastly](https://www.fastly.com/) for providing the CDN services. 
+
 ## Copyright and License
 [The MIT license](license.md).
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v2.0.10
+// plyr.js v2.0.11
 // 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.10/plyr.svg',
+        iconUrl:                'https://cdn.plyr.io/2.0.11/plyr.svg',
        clickToPlay:            true,
        hideControls:           true,
        showPosterOnEnd:        false,
@ -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
        };
    }
@ -3257,7 +3258,7 @@
                    plyr.embed.unload().then(cleanUp);

                    // Vimeo does not always return
-                    window.setTimeout(cleanUp, 200);
+                    timers.cleanUp = window.setTimeout(cleanUp, 200);

                    break;

@ -3273,6 +3274,8 @@
            }

            function cleanUp() {
+                clearTimeout(timers.cleanUp);
+
                // Default to restore original element
                if (!_is.boolean(restore)) {
                    restore = true;
@ -3294,6 +3297,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 +3546,48 @@
        var browser     = _browserSniff(),
            isOldIE     = (browser.isIE && browser.version <= 9),
            isIos       = browser.isIos,
-            isIphone    = /iPhone|iPod/i.test(navigator.userAgent),
-            audio       = !!document.createElement('audio').canPlayType,
-            video       = !!document.createElement('video').canPlayType,
-            basic, full;
+            isIphone    = browser.isIphone,
+            audioSupport = !!document.createElement('audio').canPlayType,
+            videoSupport = !!document.createElement('video').canPlayType,
+            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);
        }

--- a/src/less/plyr.less
+++ b/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;
--- a/src/scss/plyr.scss
+++ b/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;
Author	SHA1	Message	Date
Sam Potts	a9bb8afca4	v2.0.11	2016-11-27 20:18:30 +11:00
Sam Potts	28cd92b708	Merge branch 'master' of https://github.com/Selz/plyr	2016-11-27 20:15:19 +11:00
Sam Potts	a44c7ecc3a	Fix for iPad and YouTube issues	2016-11-27 20:15:15 +11:00
Sam Potts	5214c5d55d	Merge pull request #425 from sebastiancarlsson/cleanup-called-twice-bug fixes bug where cleanUp would be called twice	2016-11-18 09:40:34 +11:00
Sebastian Carlsson	3e6ed7b69b	fixes bug where cleanUp would be called twice	2016-11-17 15:43:26 +01:00
Sam Potts	7d2a8d343a	Update	2016-11-16 09:41:06 +11:00
Sam Potts	03aacf483f	Update readme.md	2016-11-16 09:40:09 +11:00
Sam Potts	73a1391f2f	Update readme.md	2016-11-02 18:45:37 +11:00
Sam Potts	660ff0434d	Cache bust	2016-11-02 18:29:38 +11:00