Use div for poster, Vimeo fixes, Tooltip fixes

This commit is contained in:
Sam Potts
2018-05-08 12:57:24 +10:00
parent 1491b017a0
commit 90919411e9
21 changed files with 140 additions and 35 deletions

View File

@ -157,10 +157,10 @@ const defaults = {
// Localisation
i18n: {
restart: 'Restart',
rewind: 'Rewind {seektime} secs',
rewind: 'Rewind {seektime}s',
play: 'Play',
pause: 'Pause',
fastForward: 'Forward {seektime} secs',
fastForward: 'Forward {seektime}s',
seek: 'Seek',
played: 'Played',
buffered: 'Buffered',
@ -326,13 +326,14 @@ const defaults = {
// Class hooks added to the player in different states
classNames: {
type: 'plyr--{0}',
provider: 'plyr--{0}',
video: 'plyr__video-wrapper',
embed: 'plyr__video-embed',
embedContainer: 'plyr__video-embed__container',
poster: 'plyr__poster',
ads: 'plyr__ads',
control: 'plyr__control',
type: 'plyr--{0}',
provider: 'plyr--{0}',
playing: 'plyr--playing',
paused: 'plyr--paused',
stopped: 'plyr--stopped',

View File

@ -39,7 +39,7 @@ const media = {
utils.wrap(this.media, this.elements.wrapper);
// Faux poster container
this.elements.poster = utils.createElement('span', {
this.elements.poster = utils.createElement('div', {
class: this.config.classNames.poster,
});

View File

@ -53,6 +53,7 @@ const vimeo = {
const options = {
loop: player.config.loop.active,
autoplay: player.autoplay,
// muted: player.muted,
byline: false,
portrait: false,
title: false,
@ -82,7 +83,7 @@ const vimeo = {
iframe.setAttribute('allow', 'autoplay');
// Inject the package
const wrapper = utils.createElement('div');
const wrapper = utils.createElement('div', { class: player.config.classNames.embedContainer });
wrapper.appendChild(iframe);
player.media = utils.replaceElement(wrapper, player.media);

View File

@ -723,7 +723,7 @@ const utils = {
}
// Vimeo
if (/^https?:\/\/player.vimeo.com\/video\/\d{8,}(?=\b|\/)/.test(url)) {
if (/^https?:\/\/player.vimeo.com\/video\/\d{0,9}(?=\b|\/)/.test(url)) {
return providers.vimeo;
}

View File

@ -32,8 +32,8 @@ $embed-padding: ((100 / 16) * 9);
pointer-events: none;
}
// Vimeo hack
> div {
// Only used for Vimeo
> .plyr__video-embed__container {
padding-bottom: to-percentage($height);
position: relative;
transform: translateY(-$offset);

View File

@ -19,6 +19,7 @@
transform: translate(-50%, 10px) scale(0.8);
transform-origin: 50% 100%;
transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
white-space: nowrap;
z-index: 2;
// The background triangle