` wrapper for embeds
The second argument for the constructor is the [#options](options) object:
diff --git a/src/js/console.js b/src/js/console.js
index c5389970..7c5ec1b4 100644
--- a/src/js/console.js
+++ b/src/js/console.js
@@ -5,8 +5,8 @@
const noop = () => {};
export default class Console {
- constructor(player) {
- this.enabled = window.console && player.config.debug;
+ constructor(enabled = false) {
+ this.enabled = window.console && enabled;
if (this.enabled) {
this.log('Debugging enabled');
diff --git a/src/js/media.js b/src/js/media.js
index 4019c1a7..3fbd9774 100644
--- a/src/js/media.js
+++ b/src/js/media.js
@@ -50,7 +50,7 @@ const media = {
}
// Inject the player wrapper
- if (this.isVideo || this.isYouTube || this.isVimeo) {
+ if (this.isVideo) {
// Create the wrapper div
this.elements.wrapper = utils.createElement('div', {
class: this.config.classNames.video,
diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js
index c77ecd20..48d46037 100644
--- a/src/js/plugins/vimeo.js
+++ b/src/js/plugins/vimeo.js
@@ -8,19 +8,12 @@ import ui from './../ui';
const vimeo = {
setup() {
- // Remove old containers
- const containers = utils.getElements.call(this, `[id^="${this.provider}-"]`);
- Array.from(containers).forEach(utils.removeElement);
-
// Add embed class for responsive
utils.toggleClass(this.elements.wrapper, this.config.classNames.embed, true);
// Set intial ratio
vimeo.setAspectRatio.call(this);
- // Set ID
- this.media.setAttribute('id', utils.generateId(this.provider));
-
// Load the API if not already
if (!utils.is.object(window.Vimeo)) {
utils.loadScript(this.config.urls.vimeo.api, () => {
@@ -57,15 +50,21 @@ const vimeo = {
transparent: 0,
gesture: 'media',
};
- const params = utils.buildUrlParameters(options);
- const id = utils.parseVimeoId(player.embedId);
+ const params = utils.buildUrlParams(options);
+ const id = utils.parseVimeoId(player.media.getAttribute('src'));
// Build an iframe
const iframe = utils.createElement('iframe');
const src = `https://player.vimeo.com/video/${id}?${params}`;
iframe.setAttribute('src', src);
iframe.setAttribute('allowfullscreen', '');
- player.media.appendChild(iframe);
+ iframe.setAttribute('allowtransparency', '');
+ iframe.setAttribute('allow', 'autoplay');
+
+ // Inject the package
+ const wrapper = utils.createElement('div');
+ wrapper.appendChild(iframe);
+ player.media = utils.replaceElement(wrapper, player.media);
// Setup instance
// https://github.com/vimeo/player.js
diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js
index 67f1ca95..bec342a7 100644
--- a/src/js/plugins/youtube.js
+++ b/src/js/plugins/youtube.js
@@ -8,24 +8,15 @@ import ui from './../ui';
const youtube = {
setup() {
- const videoId = utils.parseYouTubeId(this.embedId);
-
- // Remove old containers
- const containers = utils.getElements.call(this, `[id^="${this.provider}-"]`);
- Array.from(containers).forEach(utils.removeElement);
-
// Add embed class for responsive
utils.toggleClass(this.elements.wrapper, this.config.classNames.embed, true);
// Set aspect ratio
youtube.setAspectRatio.call(this);
- // Set ID
- this.media.setAttribute('id', utils.generateId(this.provider));
-
// Setup API
- if (utils.is.object(window.YT)) {
- youtube.ready.call(this, videoId);
+ if (utils.is.object(window.YT) && utils.is.function(window.YT.Player)) {
+ youtube.ready.call(this);
} else {
// Load the API
utils.loadScript(this.config.urls.youtube.api);
@@ -36,7 +27,7 @@ const youtube = {
// Add to queue
window.onYouTubeReadyCallbacks.push(() => {
- youtube.ready.call(this, videoId);
+ youtube.ready.call(this);
});
// Set callback to process queue
@@ -49,7 +40,7 @@ const youtube = {
},
// Get the media title
- getTitle() {
+ getTitle(videoId) {
// Try via undocumented API method first
// This method disappears now and then though...
// https://github.com/sampotts/plyr/issues/709
@@ -65,7 +56,6 @@ const youtube = {
// Or via Google API
const key = this.config.keys.google;
- const videoId = utils.parseYouTubeId(this.embedId);
if (utils.is.string(key) && !utils.is.empty(key)) {
const url = `https://www.googleapis.com/youtube/v3/videos?id=${videoId}&key=${key}&fields=items(snippet(title))&part=snippet`;
@@ -88,12 +78,24 @@ const youtube = {
},
// API ready
- ready(videoId) {
+ ready() {
const player = this;
+ // Ignore already setup (race condition)
+ const currentId = player.media.getAttribute('id');
+ if (!utils.is.empty(currentId) && currentId.startsWith('youtube-')) {
+ return;
+ }
+
+ // Replace the