Version bump

changelog.md

@@ -1,5 +1,9 @@
 # Changelog
 
+# v1.6.16
+- Always hide standard controls (Fixes #225)
+- Fix for Tooltips overflowing (fixes #230)
+
 ## v1.6.15
 - Restore scroll position when exiting full screen (fixes #236)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "plyr",
-  "version": "1.6.15",
+  "version": "1.6.16",
   "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.15/plyr.js` to `https://cdn.plyr.io/1.6.15/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.16/plyr.js` to `https://cdn.plyr.io/1.6.16/plyr.js`
 
 ### 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.15/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/1.6.16/plyr.css">
-<script src="https://cdn.plyr.io/1.6.15/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.6.16/plyr.js"></script>
 ```
 
-The SVG sprite/defs file can be found here: `https://cdn.plyr.io/1.6.15/plyr.svg`.
+The SVG sprite/defs file can be found here: `https://cdn.plyr.io/1.6.16/plyr.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.
@@ -163,7 +163,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.15/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.6.16/plyr.js"></script>
 <script>plyr.setup();</script>
 ```
 

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.6.15
+// plyr.js v1.6.16
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -44,7 +44,7 @@
         displayDuration:        true,
         loadSprite:             true,
         iconPrefix:             'plyr',
-        iconUrl:                'https://cdn.plyr.io/1.6.15/plyr.svg',
+        iconUrl:                'https://cdn.plyr.io/1.6.16/plyr.svg',
         clickToPlay:            true,
         hideControls:           true,
         showPosterOnEnd:        false,

src/less/plyr.less

@@ -246,6 +246,11 @@
 
 // Controls
 // --------------------------------------------------------------
+// Hide native controls
+.plyr ::-webkit-media-controls {
+    display: none;
+}
+
 // Playback controls
 .plyr__controls {
     display: flex;
@@ -280,7 +285,7 @@
         flex-shrink: 0;
         overflow: visible; // IE11
         vertical-align: middle;
-        padding: (@plyr-control-spacing * .7);
+        padding: @plyr-control-padding;
         border: 0;
         background: transparent;
         border-radius: 3px;
@@ -289,8 +294,8 @@
         color: inherit;
 
         svg {
-            width: 18px;
+            width: @plyr-control-icon-size;
-            height: 18px;
+            height: @plyr-control-icon-size;
             display: block;
             fill: currentColor;
         }
@@ -480,6 +485,40 @@
     z-index: 3;
 }
 
+// First tooltip
+.plyr__controls button:first-child .plyr__tooltip {
+    left: 0;
+    transform: translate(0, 10px) scale(.8);
+    transform-origin: 0 100%;
+
+    &::before {
+        left: (@plyr-control-icon-size / 2) + @plyr-control-padding;
+    }
+}
+
+// Last tooltip
+.plyr__controls button:last-child .plyr__tooltip {
+    right: 0;
+    transform: translate(0, 10px) scale(.8);
+    transform-origin: 100% 100%;
+
+    &::before {
+        left: auto;
+        right: (@plyr-control-icon-size / 2) + @plyr-control-padding;
+        transform: translateX(50%);
+    }
+}
+
+.plyr__controls button:first-child,
+.plyr__controls button:last-child {
+    &:hover .plyr__tooltip,
+    &.tab-focus:focus .plyr__tooltip,
+    .plyr__tooltip--visible {
+        transform: translate(0, 0) scale(1);
+    }
+}
+
+
 // Playback progress
 // --------------------------------------------------------------
 // <progress> element

src/less/variables.less

@@ -16,14 +16,16 @@
 @plyr-font-size-base:                   16px;
 
 // Captions
-@plyr-captions-bg: 						fade(#000, 70%);
+@plyr-captions-bg:                      fade(#000, 70%);
-@plyr-captions-color: 					#fff;
+@plyr-captions-color:                   #fff;
 @plyr-font-size-captions-base:          @plyr-font-size-base;
 @plyr-font-size-captions-medium:        ceil(@plyr-font-size-base * 1.5);
 @plyr-font-size-captions-large:         (@plyr-font-size-base * 2);
 
 // Controls
+@plyr-control-icon-size:                18px;
 @plyr-control-spacing:                  10px;
+@plyr-control-padding:                  (@plyr-control-spacing * .7);
 @plyr-video-controls-bg:                #000;
 @plyr-video-control-color:              #fff;
 @plyr-video-control-color-hover:        #fff;
@@ -37,7 +39,7 @@
 
 // Tooltips
 @plyr-tooltip-bg:                       fade(#000, 70%);
-@plyr-tooltip-color:                   	#fff;
+@plyr-tooltip-color:                    #fff;
 @plyr-tooltip-padding:                  (@plyr-control-spacing / 2);
 @plyr-tooltip-arrow-size:               4px;
 @plyr-tooltip-radius:                   3px;
@@ -62,7 +64,7 @@
 @plyr-range-thumb-active-scale:         1.25;
 @plyr-video-range-track-bg:             @plyr-video-progress-buffered-bg;
 @plyr-audio-range-track-bg:             @plyr-audio-progress-buffered-bg;
-@plyr-range-selected-bg: 				@plyr-color-main;
+@plyr-range-selected-bg:                @plyr-color-main;
 
 // Breakpoints
 @plyr-bp-screen-sm:                     480px;

src/scss/plyr.scss

@@ -245,6 +245,11 @@
 
 // Controls
 // --------------------------------------------------------------
+// Hide native controls
+.plyr ::-webkit-media-controls {
+    display: none;
+}
+
 // Playback controls
 .plyr__controls {
     display: flex;
@@ -479,6 +484,40 @@
     z-index: 3;
 }
 
+// First tooltip
+.plyr__controls button:first-child .plyr__tooltip {
+    $tooltip-arrow-offset: ;
+    left: 0;
+    transform: translate(0, 10px) scale(.8);
+    transform-origin: 0 100%;
+
+    &::before {
+        left: ($plyr-control-icon-size / 2) + $plyr-control-padding;
+    }
+}
+
+// Last tooltip
+.plyr__controls button:last-child .plyr__tooltip {
+    right: 0;
+    transform: translate(0, 10px) scale(.8);
+    transform-origin: 100% 100%;
+
+    &::before {
+        left: auto;
+        right: ($plyr-control-icon-size / 2) + $plyr-control-padding;
+        transform: translateX(50%);
+    }
+}
+
+.plyr__controls button:first-child,
+.plyr__controls button:last-child {
+    &:hover .plyr__tooltip,
+    &.tab-focus:focus .plyr__tooltip,
+    .plyr__tooltip--visible {
+        transform: translate(0, 0) scale(1);
+    }
+}
+
 // Playback progress
 // --------------------------------------------------------------
 // <progress> element

src/scss/variables.scss

@@ -17,14 +17,16 @@ $plyr-font-size-small:                  14px !default;
 $plyr-font-size-base:                   16px !default;
 
 // Captions
-$plyr-captions-bg: 						transparentize(#000, .3) !default;
+$plyr-captions-bg:                      transparentize(#000, .3) !default;
-$plyr-captions-color: 					#fff !default;
+$plyr-captions-color:                   #fff !default;
 $plyr-font-size-captions-base:          $plyr-font-size-base !default;
 $plyr-font-size-captions-medium:        ceil($plyr-font-size-base * 1.5) !default;
 $plyr-font-size-captions-large:         ($plyr-font-size-base * 2) !default;
 
 // Controls
+$plyr-control-icon-size:                18px !default;
 $plyr-control-spacing:                  10px !default;
+$plyr-control-padding:                  ($plyr-control-spacing * .7) !default;
 $plyr-video-controls-bg:                #000 !default;
 $plyr-video-control-color:              #fff !default;
 $plyr-video-control-color-hover:        #fff !default;
@@ -63,7 +65,7 @@ $plyr-range-thumb-active-bg:            $plyr-video-control-bg-hover !default;
 $plyr-range-thumb-active-scale:         1.25 !default;
 $plyr-video-range-track-bg:             $plyr-video-progress-buffered-bg !default;
 $plyr-audio-range-track-bg:             $plyr-audio-progress-buffered-bg !default;
-$plyr-range-selected-bg: 				$plyr-color-main !default;
+$plyr-range-selected-bg:                $plyr-color-main !default;
 
 // Breakpoints
 $plyr-bp-screen-sm:                     480px !default;