Merge branch 'master' into develop

# Conflicts:
#	dist/plyr.css
#	src/less/plyr.less

package.json

@@ -1,6 +1,6 @@
 {
   "name": "plyr",
-  "version": "1.6.4",
+  "version": "1.6.5",
   "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.6.4/plyr.js` to `https://cdn.plyr.io/1.6.4/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.6.5/plyr.js` to `https://cdn.plyr.io/1.6.5/plyr.js`
 
 ### Node Package Manager (NPM)
 
@@ -71,11 +71,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.6.4/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/1.6.5/plyr.css">
-<script src="https://cdn.plyr.io/1.6.4/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.6.5/plyr.js"></script>
 ```
 
-You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.6.4/sprite.svg`.
+You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.6.5/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.scss` file included in `/src` in your build to save a request.
@@ -113,7 +113,7 @@ Using AJAX means you can load the sprite from a different origin. Avoiding the i
 		c.innerHTML = a.responseText;
 		b.insertBefore(c, b.childNodes[0]);
 	};
-})(document, 'https://cdn.plyr.io/1.6.4/sprite.svg');
+})(document, 'https://cdn.plyr.io/1.6.5/sprite.svg');
 </script>
 ```
 
@@ -188,7 +188,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.6.4/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.6.5/plyr.js"></script>
 <script>plyr.setup();</script>
 ```
 

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.6.4
+// plyr.js v1.6.5
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================

src/less/base.less

@@ -8,18 +8,22 @@
     min-width: 200px;
     font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
 
-    // border-box everything
+    & when (@plyr-border-box = true) {
-    // http://paulirish.com/2012/box-sizing-border-box-ftw/
+        // border-box everything
-    &,
+        // http://paulirish.com/2012/box-sizing-border-box-ftw/
-    *,
+        &,
-    *::after,
+        *,
-    *::before {
+        *::after,
-        box-sizing: border-box;
+        *::before {
+            box-sizing: border-box;
+        }
     }
 
-    // Fix 300ms delay
+    & when (@plyr-touch-action = true) {
-    a, button, input, label {
+        // Fix 300ms delay
-        touch-action: manipulation;
+        a, button, input, label {
+            touch-action: manipulation;
+        }
     }
 
     // Media elements

src/less/utilities.less

@@ -4,11 +4,22 @@
 
 // Screen reader only elements
 .plyr__sr-only {
-    position: absolute !important;
     clip: rect(1px, 1px, 1px, 1px);
-    padding: 0 !important;
-    border: 0 !important;
-    height: 1px !important;
-    width: 1px !important;
     overflow: hidden;
+
+	// !important is not always needed
+	& when (@plyr-sr-only-important = true) {
+		position: absolute !important;
+		padding: 0 !important;
+		border: 0 !important;
+		height: 1px !important;
+		width: 1px !important;
+	}
+	& when (@plyr-sr-only-important = false) {
+		position: absolute;
+		padding: 0;
+		border: 0;
+		height: 1px;
+		width: 1px;
+	}
 }

src/less/variables.less

@@ -2,6 +2,11 @@
 // Variables
 // ==========================================================================
 
+// Settings
+@plyr-border-box:                       true;
+@plyr-touch-action:                     true;
+@plyr-sr-only-important:                true;
+
 // Colors
 @plyr-color-main:                       #3498db;
 

src/scss/plyr.scss

@@ -21,18 +21,22 @@
     min-width: 200px;
     font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
 
-    // border-box everything
+    @if $plyr-border-box == true {
-    // http://paulirish.com/2012/box-sizing-border-box-ftw/
+        // border-box everything
-    &,
+        // http://paulirish.com/2012/box-sizing-border-box-ftw/
-    *,
+        &,
-    *::after,
+        *,
-    *::before {
+        *::after,
-        box-sizing: border-box;
+        *::before {
+            box-sizing: border-box;
+        }
     }
 
-    // Fix 300ms delay
+    @if $plyr-touch-action == true {
-    a, button, input, label {
+      // Fix 300ms delay
+      a, button, input, label {
         touch-action: manipulation;
+      }
     }
 
     // Media elements
@@ -138,13 +142,23 @@
 
 // Screen reader only elements
 .plyr__sr-only {
-    position: absolute !important;
     clip: rect(1px, 1px, 1px, 1px);
-    padding: 0 !important;
-    border: 0 !important;
-    height: 1px !important;
-    width: 1px !important;
     overflow: hidden;
+
+    // !important is not always needed
+    @if $plyr-sr-only-important == true {
+        position: absolute !important;
+        padding: 0 !important;
+        border: 0 !important;
+        height: 1px !important;
+        width: 1px !important;
+    } @else {
+        position: absolute;
+        padding: 0;
+        border: 0;
+        height: 1px;
+        width: 1px;
+    }
 }
 
 // Video
@@ -629,6 +643,7 @@
 // --------------------------------------------------------------
 .plyr .plyr__volume { 
     display: none;
+    flex: 1;
     position: relative;
 
     input[type="range"] {

src/scss/variables.scss

@@ -4,6 +4,11 @@
 // https://robots.thoughtbot.com/sass-default
 // ==========================================================================
 
+// Settings
+$plyr-border-box:                       true !default;
+$plyr-touch-action:                     true !default;
+$plyr-sr-only-important:                true !default;
+
 // Colors
 $plyr-color-main:                       #3498db !default;