ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Automatic Vimeo aspect ratio

Browse Source
This commit is contained in:
Sam Potts
2017-11-06 22:00:00 +11:00
parent 2497e25b3c
commit 84505da84b
7 changed files with 33 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/js/plugins/vimeo.js
View File

@ -16,12 +16,8 @@ const vimeo = {
// Add embed class for responsive
utils.toggleClass(this.elements.wrapper, this.config.classNames.embed, true);
// Set aspect ratio
const ratio = this.config.ratio.split(':');
const padding = 100 / ratio[0] * ratio[1];
const offset = (300 - padding) / 6;
this.elements.wrapper.style.paddingBottom = `${padding}%`;
this.media.style.transform = `translateY(-${offset}%)`;
// Set intial ratio
vimeo.setAspectRatio.call(this);
// Set ID
this.media.setAttribute('id', utils.generateId(this.type));
@ -41,6 +37,15 @@ const vimeo = {
}
},
// Set aspect ratio
setAspectRatio(input) {
const ratio = utils.is.string(input) ? input.split(':') : this.config.ratio.split(':');
const padding = 100 / ratio[0] * ratio[1];
const offset = (300 - padding) / 6;
this.elements.wrapper.style.paddingBottom = `${padding}%`;
this.media.style.transform = `translateY(-${offset}%)`;
},
// API Ready
ready() {
const player = this;
@ -161,6 +166,12 @@ const vimeo = {
},
});
// Set aspect ratio based on video size
Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(dimensions => {
const ratio = utils.getAspectRatio(dimensions[0], dimensions[1]);
vimeo.setAspectRatio.call(this, ratio);
});
// Get available speeds
if (player.config.controls.includes('settings') && player.config.settings.includes('speed')) {
controls.setSpeedMenu.call(player);

9
src/js/plugins/youtube.js
View File

@ -18,8 +18,7 @@ const youtube = {
utils.toggleClass(this.elements.wrapper, this.config.classNames.embed, true);
// Set aspect ratio
const ratio = this.config.ratio.split(':');
this.elements.wrapper.style.paddingBottom = `${100 / ratio[0] * ratio[1]}%`;
youtube.setAspectRatio.call(this);
// Set ID
this.media.setAttribute('id', utils.generateId(this.type));
@ -48,6 +47,12 @@ const youtube = {
}
},
// Set aspect ratio
setAspectRatio() {
const ratio = this.config.ratio.split(':');
this.elements.wrapper.style.paddingBottom = `${100 / ratio[0] * ratio[1]}%`;
},
// API ready
ready(videoId) {
const player = this;