Fix for bug where controls wouldn't show on hover over YouTube video

Remove pointer-events: none on embed <iframe> to comply with YouTube ToS
2018-06-21 19:26:56 +10:00 · 2018-06-21 14:26:40 +10:00
13 changed files with 22 additions and 19 deletions
@@ -1,3 +1,11 @@
+# v3.3.20
+
+-   Fix for bug where controls wouldn't show on hover over YouTube video
+
+# v3.3.19
+
+-   Remove `pointer-events: none` on embed `<iframe>` to comply with YouTube ToS
+
 # 3.3.18

 -   Ads are now only supported on HTML5 videos as it violates terms of service for YouTube and Vimeo 😢
@@ -1,6 +1,6 @@
 {
    "name": "plyr",
-    "version": "3.3.18",
+    "version": "3.3.20",
    "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
    "homepage": "https://plyr.io",
    "main": "./dist/plyr.js",
@@ -132,13 +132,13 @@ See [initialising](#initialising) for more information on advanced setups.
 You can use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript. There's 2 versions; one with and one without [polyfills](#polyfills). My recommendation would be to manage polyfills seperately as part of your application but to make life easier you can use the polyfilled build.

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

 ...or...

 ```html
-<script src="https://cdn.plyr.io/3.3.18/plyr.polyfilled.js"></script>
+<script src="https://cdn.plyr.io/3.3.20/plyr.polyfilled.js"></script>
 ```

 ### CSS
@@ -152,13 +152,13 @@ Include the `plyr.css` stylsheet into your `<head>`
 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/3.3.18/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/3.3.20/plyr.css">
 ```

 ### SVG Sprite

 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/3.3.18/plyr.svg`.
+reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.3.20/plyr.svg`.

 ## Ads

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.3.18
+// plyr.js v3.3.20
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr Polyfilled Build
-// plyr.js v3.3.18
+// plyr.js v3.3.20
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -27,11 +27,6 @@ $embed-padding: ((100 / 16) * 9);
    $height: 240;
    $offset: to-percentage(($height - $embed-padding) / ($height / 50));

-    // To allow mouse events to be captured if full support
-    iframe {
-        pointer-events: none;
-    }
-
    // Only used for Vimeo
    > .plyr__video-embed__container {
        padding-bottom: to-percentage($height);
@@ -15,9 +15,9 @@
    transition: opacity 0.3s ease;
    width: 100%;
    z-index: 1;
-    pointer-events: none;
 }

 .plyr--stopped.plyr__poster-enabled .plyr__poster {
    opacity: 1;
+    pointer-events: none;
 }
Author	SHA1	Message	Date
Sam Potts	ac64350a5f	Fix for bug where controls wouldn't show on hover over YouTube video	2018-06-21 19:26:56 +10:00
Sam Potts	333619f1e3	Remove `pointer-events: none` on embed `<iframe>` to comply with YouTube ToS	2018-06-21 14:26:40 +10:00