From be2e7d4c995c12f691896fccc01eeebfddf1385d Mon Sep 17 00:00:00 2001 From: Sam Date: Mon, 23 May 2016 21:19:53 +0100 Subject: Always hide standard controls (Fixes #225) --- src/less/plyr.less | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'src/less/plyr.less') diff --git a/src/less/plyr.less b/src/less/plyr.less index ca7b555a..27baa231 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -246,6 +246,11 @@ // Controls // -------------------------------------------------------------- +// Hide native controls +.plyr ::-webkit-media-controls { + display: none; +} + // Playback controls .plyr__controls { display: flex; -- cgit v1.2.3 From b3299b464114dc2dd3fd102c4ceb22ce0a1f8349 Mon Sep 17 00:00:00 2001 From: Sam Date: Mon, 23 May 2016 22:29:20 +0100 Subject: Fix for Tooltips overflowing (fixes #230) --- src/less/plyr.less | 40 +++++++++++++++++++++++++++++++++++++--- 1 file changed, 37 insertions(+), 3 deletions(-) (limited to 'src/less/plyr.less') diff --git a/src/less/plyr.less b/src/less/plyr.less index 27baa231..3398b603 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -285,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; @@ -294,8 +294,8 @@ color: inherit; svg { - width: 18px; - height: 18px; + width: @plyr-control-icon-size; + height: @plyr-control-icon-size; display: block; fill: currentColor; } @@ -485,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 // -------------------------------------------------------------- // element -- cgit v1.2.3 From edf5a14171fb51f74269341459d354ec1494cfe9 Mon Sep 17 00:00:00 2001 From: Tzvi <5633910@gmail.com> Date: Thu, 26 May 2016 03:33:05 +0300 Subject: FIx Plyr to work with RTL systems (less) --- src/less/plyr.less | 1 + 1 file changed, 1 insertion(+) (limited to 'src/less/plyr.less') diff --git a/src/less/plyr.less b/src/less/plyr.less index 3398b603..9dda2dfc 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -20,6 +20,7 @@ max-width: 100%; min-width: 200px; font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; + direction: ltr; & when (@plyr-border-box = true) { // border-box everything -- cgit v1.2.3 From 521431e09390e86895f8a52cf0a50195d9050be1 Mon Sep 17 00:00:00 2001 From: Sam Date: Wed, 1 Jun 2016 09:38:29 +0100 Subject: Fix for scroll direction on volume (fixes #258) --- src/less/plyr.less | 1 - 1 file changed, 1 deletion(-) (limited to 'src/less/plyr.less') diff --git a/src/less/plyr.less b/src/less/plyr.less index 9dda2dfc..0e4198c8 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -178,7 +178,6 @@ padding-bottom: 56.25%; /* 16:9 */ height: 0; overflow: hidden; - border-radius: inherit; iframe { position: absolute; -- cgit v1.2.3 From 2fdcc18356510ab22998052eb9258238cd0de022 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 25 Jun 2016 22:33:23 +1000 Subject: Hide Shadow DOM elements --- src/less/plyr.less | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'src/less/plyr.less') diff --git a/src/less/plyr.less b/src/less/plyr.less index ca7b555a..16f82453 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -203,8 +203,8 @@ // Captions // -------------------------------------------------------------- -// Hide default captions -.plyr video::-webkit-media-text-track-container { +// Hide default captions (can't find -moz -ms prefixes) +.plyr ::-webkit-media-text-track-container { display: none; } .plyr__captions { @@ -246,6 +246,11 @@ // Controls // -------------------------------------------------------------- +// Hide default controls (can't find -moz -ms prefixes) +.plyr ::-webkit-media-controls, +.plyr ::-webkit-media-controls-enclosure { + display: none; +} // Playback controls .plyr__controls { display: flex; -- cgit v1.2.3 From 9b75436380bade755a7d54347dd85885b8230dd5 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 25 Jun 2016 23:39:00 +1000 Subject: v1.8.3 - Disabled iPad support for YouTube and Vimeo due to iOS limitations with iFrame playback - Fixed IE11 icon loading (fixes #269) - Updated screenshot (fixes #281) - Added WordPress plugin (fixes #239) - Added Neos plugin - Added HLS, Shaka and dash.js examples (see #235 for more) - Improvements for controls hiding and showing on touch devices --- src/less/plyr.less | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) (limited to 'src/less/plyr.less') diff --git a/src/less/plyr.less b/src/less/plyr.less index d60c281f..4dace8e8 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -19,6 +19,7 @@ position: relative; max-width: 100%; min-width: 200px; + overflow: hidden; font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; direction: ltr; @@ -203,8 +204,8 @@ // Captions // -------------------------------------------------------------- -// Hide default captions (can't find -moz -ms prefixes) -.plyr ::-webkit-media-text-track-container { +// Hide default captions +.plyr video::-webkit-media-text-track-container { display: none; } .plyr__captions { @@ -246,9 +247,8 @@ // Controls // -------------------------------------------------------------- -// Hide default controls (can't find -moz -ms prefixes) -.plyr ::-webkit-media-controls, -.plyr ::-webkit-media-controls-enclosure { +// Hide native controls +.plyr ::-webkit-media-controls { display: none; } @@ -256,12 +256,9 @@ .plyr__controls { display: flex; align-items: center; - line-height: 1; text-align: center; - transition: opacity .3s ease; - // Spacing > button, .plyr__progress, @@ -325,6 +322,7 @@ // Hide controls .plyr--hide-controls .plyr__controls { opacity: 0; + pointer-events: none; } // Video controls @@ -338,6 +336,7 @@ border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; color: @plyr-video-control-color; + transition: opacity .3s ease; button { // Hover and tab focus -- cgit v1.2.3 From c61fad51c1aeb947616aefd626cbddfd102c2e0c Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 25 Jun 2016 23:46:37 +1000 Subject: Fix for z-index on large play button --- src/less/plyr.less | 1 + 1 file changed, 1 insertion(+) (limited to 'src/less/plyr.less') diff --git a/src/less/plyr.less b/src/less/plyr.less index 4dace8e8..c6d15363 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -371,6 +371,7 @@ .plyr__play-large { display: none; position: absolute; + z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); -- cgit v1.2.3 From 7e7508ca821b930fc132370d6d490e9c16d983a4 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 26 Jun 2016 08:34:36 +1000 Subject: Fixed overflow issues (fixes #286) --- src/less/plyr.less | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'src/less/plyr.less') diff --git a/src/less/plyr.less b/src/less/plyr.less index c6d15363..23323b98 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -19,8 +19,7 @@ position: relative; max-width: 100%; min-width: 200px; - overflow: hidden; - font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; + font-family: @plyr-font-family; direction: ltr; & when (@plyr-border-box = true) { -- cgit v1.2.3 From 7f7ecf852e2cc1e98ccb747c3a07206d7668520a Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 26 Jun 2016 09:07:42 +1000 Subject: Line height fix --- src/less/plyr.less | 1 - 1 file changed, 1 deletion(-) (limited to 'src/less/plyr.less') diff --git a/src/less/plyr.less b/src/less/plyr.less index 23323b98..74a51440 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -663,7 +663,6 @@ display: inline-block; vertical-align: middle; font-size: @plyr-font-size-small; - line-height: .95; } // Media duration hidden on small screens .plyr__time + .plyr__time { -- cgit v1.2.3 From bf9de231d8046cd6a5ec90e22bf8585019cbd1d0 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 10 Jul 2016 20:45:54 +1000 Subject: Styling minor tweaks --- src/less/plyr.less | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'src/less/plyr.less') diff --git a/src/less/plyr.less b/src/less/plyr.less index 74a51440..3b41a874 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -353,7 +353,6 @@ border-radius: inherit; background: @plyr-audio-controls-bg; border: @plyr-audio-controls-border; - box-shadow: @plyr-audio-controls-box-shadow; color: @plyr-audio-control-color; button { @@ -378,7 +377,7 @@ background: @plyr-video-control-bg-hover; border: 4px solid currentColor; border-radius: 100%; - box-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%); + box-shadow: 0 1px 1px fade(#000, 15%); color: @plyr-video-control-color; transition: all .3s ease; -- cgit v1.2.3 From a6f57fc034216f3f458c36d886d1f7a17119d235 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Thu, 21 Jul 2016 21:15:44 +1000 Subject: Fix for multiline captions (Fixes #314) --- src/less/plyr.less | 2 ++ 1 file changed, 2 insertions(+) (limited to 'src/less/plyr.less') diff --git a/src/less/plyr.less b/src/less/plyr.less index 3b41a874..162e8fd0 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -225,6 +225,8 @@ border-radius: 2px; padding: floor(@plyr-control-spacing / 3) @plyr-control-spacing; background: @plyr-captions-bg; + box-decoration-break: clone; + line-height: 150%; } span:empty { display: none; -- cgit v1.2.3