Bug fix for embeds: play not being defined (fixes #185 and #186)

changelog.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## v1.5.21
+- Bug fix for embeds: `play` not being defined (fixes #185 and #186)
+
+## v1.5.20
+- Bug fix for autoplay option
+
+## v1.5.19
+- Fix for accessing `embed` property after `ready` event fired
+
 ## v1.5.18
 - Added 'ready' event for initial setup complete or source change occurs
 - Fixed SASS stylesheet references to transparentize

package.json

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

readme.md

@@ -40,7 +40,7 @@ If you have any cool ideas or features, please let me know by [creating an issue
 ## Implementation
 Check `docs/index.html` and `docs/dist/docs.js` for an example setup.
 
-**Heads up:** the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.5.20/plyr.js` to `https://cdn.plyr.io/1.5.20/plyr.js`
+**Heads up:** the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.5.21/plyr.js` to `https://cdn.plyr.io/1.5.21/plyr.js`
 
 ### Node Package Manager (NPM)
 [![npm version](https://badge.fury.io/js/plyr.svg)](https://badge.fury.io/js/plyr) 
@@ -73,11 +73,11 @@ More info is on [npm](https://www.npmjs.com/package/ember-cli-plyr) and [GitHub]
 If you want to use our CDN, you can use the following:
 
 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/1.5.20/plyr.css">
-<script src="https://cdn.plyr.io/1.5.20/plyr.js"></script>
+<link rel="stylesheet" href="https://cdn.plyr.io/1.5.21/plyr.css">
+<script src="https://cdn.plyr.io/1.5.21/plyr.js"></script>
 ```
 
-You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.20/sprite.svg`.
+You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.21/sprite.svg`.
 
 ### CSS & Styling
 If you want to use the default css, add the `plyr.css` file from `/dist` into your head, or even better use `plyr.less` or `plyr.sass` file included in `/src` in your build to save a request.
@@ -179,7 +179,7 @@ Be sure to [validate your caption files](https://quuz.org/webvtt/)
 Here's an example of a default setup:
 
 ```html
-<script src="https://cdn.plyr.io/1.5.20/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.5.21/plyr.js"></script>
 <script>plyr.setup();</script>
 ```
 

src/js/plyr.js

@@ -1,13 +1,13 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.5.20
+// plyr.js v1.5.21
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
 // Credits: http://paypal.github.io/accessible-html5-video-player/
 // ==========================================================================
 
-(function(root, factory) {
+;(function(root, factory) {
     'use strict';
     /*global define,module*/
 
@@ -1409,14 +1409,14 @@
 
         // When embeds are ready
         function _embedReady() {
-            // Set title
-            _setTitle(_getElement('iframe'));
-
             // Store reference to API
             plyr.container.plyr.embed = plyr.embed;
 
             // Setup the UI
             _setupInterface();
+
+            // Set title
+            _setTitle(_getElement('iframe'));
         }
 
         // Handle YouTube API ready
@@ -2830,7 +2830,7 @@
         }
 
         // Create a player instance for each element
-        for (var i = elements.length - 1; i >= 0; i--) {
+        for (var i = 0; i < elements.length; i++) {
             // Get the current element
             var element = elements[i];
 

src/less/plyr.less

@@ -343,6 +343,7 @@
         bottom: 100%;
         margin-bottom: @plyr-tooltip-padding;
         padding: @plyr-tooltip-padding (@plyr-tooltip-padding * 1.5);
+        pointer-events: none;
 
         opacity: 0;
         background: @plyr-tooltip-bg;

src/sass/plyr.scss

@@ -343,6 +343,7 @@ $plyr-bp-captions-large:             768px !default; // When captions jump to th
         bottom: 100%;
         margin-bottom: $plyr-tooltip-padding;
         padding: $plyr-tooltip-padding ($plyr-tooltip-padding * 1.5);
+        pointer-events: none;
 
         opacity: 0;
         background: $plyr-tooltip-bg;