aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/js/plyr.js37
-rw-r--r--src/less/plyr.less37
-rw-r--r--src/scss/plyr.scss34
3 files changed, 69 insertions, 39 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js
index 0570e35b..8a486d93 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -257,6 +257,7 @@
isChrome: isChrome,
isSafari: isSafari,
isIos: /(iPad|iPhone|iPod)/g.test(navigator.platform),
+ isIphone: /(iPhone|iPod)/g.test(navigator.userAgent),
isTouch: 'ontouchstart' in document.documentElement
};
}
@@ -3296,6 +3297,9 @@
// Replace the container with the original element provided
plyr.container.parentNode.replaceChild(original, plyr.container);
+ // Allow overflow (set on fullscreen)
+ document.body.style.overflow = '';
+
// Event
_triggerEvent(original, 'destroyed', true);
}
@@ -3542,31 +3546,48 @@
var browser = _browserSniff(),
isOldIE = (browser.isIE && browser.version <= 9),
isIos = browser.isIos,
- isIphone = /iPhone|iPod/i.test(navigator.userAgent),
- audio = !!document.createElement('audio').canPlayType,
- video = !!document.createElement('video').canPlayType,
- basic, full;
+ isIphone = browser.isIphone,
+ audioSupport = !!document.createElement('audio').canPlayType,
+ videoSupport = !!document.createElement('video').canPlayType,
+ basic = false,
+ full = false;
switch (type) {
case 'video':
- basic = video;
+ basic = videoSupport;
full = (basic && (!isOldIE && !isIphone));
break;
case 'audio':
- basic = audio;
+ basic = audioSupport;
full = (basic && !isOldIE);
break;
+ // Vimeo does not seem to be supported on iOS via API
+ // Issue raised https://github.com/vimeo/player.js/issues/87
case 'vimeo':
+ basic = true;
+ full = (!isOldIE && !isIos);
+ break;
+
case 'youtube':
+ basic = true;
+ full = (!isOldIE && !isIos);
+
+ // YouTube seems to work on iOS 10+ on iPad
+ if (isIos && !isIphone && browser.version >= 10) {
+ full = true;
+ }
+
+ break;
+
case 'soundcloud':
basic = true;
- full = (!isOldIE && !isIos);
+ full = (!isOldIE && !isIphone);
break;
default:
- basic = (audio && video);
+ basic = (audioSupport && videoSupport);
full = (basic && !isOldIE);
}
diff --git a/src/less/plyr.less b/src/less/plyr.less
index 143e7f06..c9e3d7c3 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -61,14 +61,14 @@
height: (@plyr-range-thumb-height * @plyr-range-thumb-active-scale);
width: 100%;
margin: 0;
- padding: 0;
+ padding: 0;
vertical-align: middle;
-
+
appearance: none;
cursor: pointer;
border: none;
background: transparent;
-
+
// WebKit
&::-webkit-slider-runnable-track {
.plyr-range-track();
@@ -86,7 +86,7 @@
&::-moz-range-thumb {
.plyr-range-thumb();
}
-
+
// Microsoft
&::-ms-track {
height: @plyr-range-track-height;
@@ -104,7 +104,7 @@
&::-ms-thumb {
.plyr-range-thumb();
// For some reason, Edge uses the -webkit margin above
- margin-top: 0;
+ margin-top: 0;
}
&::-ms-tooltip {
display: none;
@@ -116,11 +116,11 @@
}
&::-moz-focus-outer {
border: 0;
- }
+ }
&.tab-focus:focus {
outline-offset: 3px;
}
-
+
// Pressed styles
&:active {
&::-webkit-slider-thumb {
@@ -179,9 +179,10 @@
.plyr__video-embed {
padding-bottom: 56.25%; /* 16:9 */
height: 0;
- overflow: hidden;
+ border-radius: inherit;
- // Require z-index to force border-radius
+ // Require overflow and z-index to force border-radius
+ overflow: hidden;
z-index: 0;
iframe {
@@ -192,7 +193,6 @@
height: 100%;
border: 0;
user-select: none;
- z-index: 1;
}
// Vimeo hack
@@ -265,7 +265,7 @@
// Playback controls
.plyr__controls {
display: flex;
- align-items: center;
+ align-items: center;
line-height: 1;
text-align: center;
@@ -329,7 +329,7 @@
}
}
}
-// Hide controls
+// Hide controls
.plyr--hide-controls .plyr__controls {
opacity: 0;
pointer-events: none;
@@ -341,6 +341,7 @@
left: 0;
right: 0;
bottom: 0;
+ z-index: 2;
padding: (@plyr-control-spacing * 5) @plyr-control-spacing @plyr-control-spacing;
background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 50%));
border-bottom-left-radius: inherit;
@@ -476,7 +477,7 @@
height: 0;
left: 50%;
transform: translateX(-50%);
-
+
// The background triangle
bottom: -@plyr-tooltip-arrow-size;
border-right: @plyr-tooltip-arrow-size solid transparent;
@@ -624,16 +625,16 @@
}
&::-moz-progress-bar {
transition: width .2s ease;
- }
+ }
&::-ms-fill {
transition: width .2s ease;
- }
+ }
}
.plyr--video .plyr__progress--buffer,
.plyr--video .plyr__volume--display {
background: @plyr-video-range-track-bg;
}
-.plyr--video .plyr__progress--buffer {
+.plyr--video .plyr__progress--buffer {
color: @plyr-video-progress-buffered-bg;
}
.plyr--audio .plyr__progress--buffer,
@@ -740,6 +741,10 @@
height: 100%;
width: 100%;
}
+ .plyr__video-embed {
+ // Revert overflow change
+ overflow: visible;
+ }
.plyr__controls {
position: absolute;
bottom: 0;
diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss
index 70518591..91a5d1b2 100644
--- a/src/scss/plyr.scss
+++ b/src/scss/plyr.scss
@@ -61,14 +61,14 @@
height: ($plyr-range-thumb-height * $plyr-range-thumb-active-scale);
width: 100%;
margin: 0;
- padding: 0;
+ padding: 0;
vertical-align: middle;
-
+
appearance: none;
cursor: pointer;
border: none;
background: transparent;
-
+
// WebKit
&::-webkit-slider-runnable-track {
@include plyr-range-track();
@@ -86,7 +86,7 @@
&::-moz-range-thumb {
@include plyr-range-thumb();
}
-
+
// Microsoft
&::-ms-track {
height: $plyr-range-track-height;
@@ -104,7 +104,7 @@
&::-ms-thumb {
@include plyr-range-thumb();
// For some reason, Edge uses the -webkit margin above
- margin-top: 0;
+ margin-top: 0;
}
&::-ms-tooltip {
display: none;
@@ -116,11 +116,11 @@
}
&::-moz-focus-outer {
border: 0;
- }
+ }
&.tab-focus:focus {
outline-offset: 3px;
}
-
+
// Pressed styles
&:active {
&::-webkit-slider-thumb {
@@ -178,10 +178,10 @@
.plyr__video-embed {
padding-bottom: 56.25%; /* 16:9 */
height: 0;
- overflow: hidden;
border-radius: inherit;
- // Require z-index to force border-radius
+ // Require overflow and z-index to force border-radius
+ overflow: hidden;
z-index: 0;
iframe {
@@ -264,7 +264,7 @@
// Playback controls
.plyr__controls {
display: flex;
- align-items: center;
+ align-items: center;
line-height: 1;
text-align: center;
@@ -328,7 +328,7 @@
}
}
}
-// Hide controls
+// Hide controls
.plyr--hide-controls .plyr__controls {
opacity: 0;
pointer-events: none;
@@ -475,7 +475,7 @@
height: 0;
left: 50%;
transform: translateX(-50%);
-
+
// The background triangle
bottom: -$plyr-tooltip-arrow-size;
border-right: $plyr-tooltip-arrow-size solid transparent;
@@ -622,16 +622,16 @@
}
&::-moz-progress-bar {
transition: width .2s ease;
- }
+ }
&::-ms-fill {
transition: width .2s ease;
- }
+ }
}
.plyr--video .plyr__progress--buffer,
.plyr--video .plyr__volume--display {
background: $plyr-video-range-track-bg;
}
-.plyr--video .plyr__progress--buffer {
+.plyr--video .plyr__progress--buffer {
color: $plyr-video-progress-buffered-bg;
}
.plyr--audio .plyr__progress--buffer,
@@ -738,6 +738,10 @@
height: 100%;
width: 100%;
}
+ .plyr__video-embed {
+ // Revert overflow change
+ overflow: visible;
+ }
.plyr__controls {
position: absolute;
bottom: 0;
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-10 21:04:27 +0000