1 files changed, 20 insertions, 55 deletions

diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js
index 2d9ba6e2..a7664e73 100644
--- a/src/js/plugins/vimeo.js
+++ b/src/js/plugins/vimeo.js
@@ -10,7 +10,9 @@ import { triggerEvent } from '../utils/events';
 import fetch from '../utils/fetch';
 import is from '../utils/is';
 import loadScript from '../utils/loadScript';
+import { extend } from '../utils/objects';
 import { format, stripHTML } from '../utils/strings';
+import { setAspectRatio } from '../utils/style';
 import { buildUrlParams } from '../utils/urls';
 
 // Parse Vimeo ID from URL
@@ -27,13 +29,6 @@ function parseId(url) {
     return url.match(regex) ? RegExp.$2 : url;
 }
 
-// Get aspect ratio for dimensions
-function getAspectRatio(width, height) {
-    const getRatio = (w, h) => (h === 0 ? w : getRatio(h, w % h));
-    const ratio = getRatio(width, height);
-    return `${width / ratio}:${height / ratio}`;
-}
-
 // Set playback state and trigger change (only on actual change)
 function assurePlaybackState(play) {
     if (play && !this.embed.hasPlayed) {
@@ -51,7 +46,7 @@ const vimeo = {
         toggleClass(this.elements.wrapper, this.config.classNames.embed, true);
 
         // Set intial ratio
-        vimeo.setAspectRatio.call(this);
+        setAspectRatio.call(this);
 
         // Load the API if not already
         if (!is.object(window.Vimeo)) {
@@ -67,40 +62,25 @@ const vimeo = {
         }
     },
 
-    // Set aspect ratio
-    // For Vimeo we have an extra 300% height <div> to hide the standard controls and UI
-    setAspectRatio(input) {
-        const [x, y] = (is.string(input) ? input : this.config.ratio).split(':').map(Number);
-        const padding = (100 / x) * y;
-        vimeo.padding = padding;
-        this.elements.wrapper.style.paddingBottom = `${padding}%`;
-
-        if (this.supported.ui) {
-            const height = 240;
-            const offset = (height - padding) / (height / 50);
-
-            this.media.style.transform = `translateY(-${offset}%)`;
-        }
-    },
-
     // API Ready
     ready() {
         const player = this;
+        const config = player.config.vimeo;
 
         // Get Vimeo params for the iframe
-        const options = {
-            loop: player.config.loop.active,
-            autoplay: player.autoplay,
-            // muted: player.muted,
-            byline: false,
-            portrait: false,
-            title: false,
-            speed: true,
-            transparent: 0,
-            gesture: 'media',
-            playsinline: !this.config.fullscreen.iosNative,
-        };
-        const params = buildUrlParams(options);
+        const params = buildUrlParams(
+            extend(
+                {},
+                {
+                    loop: player.config.loop.active,
+                    autoplay: player.autoplay,
+                    muted: player.muted,
+                    gesture: 'media',
+                    playsinline: !this.config.fullscreen.iosNative,
+                },
+                config,
+            ),
+        );
 
         // Get the source URL or ID
         let source = player.media.getAttribute('src');
@@ -300,8 +280,9 @@ const vimeo = {
 
         // Set aspect ratio based on video size
         Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(dimensions => {
-            vimeo.ratio = getAspectRatio(dimensions[0], dimensions[1]);
-            vimeo.setAspectRatio.call(this, vimeo.ratio);
+            const [width, height] = dimensions;
+            player.embed.ratio = `${width}:${height}`;
+            setAspectRatio.call(this, player.embed.ratio);
         });
 
         // Set autopause
@@ -405,22 +386,6 @@ const vimeo = {
             triggerEvent.call(player, player.media, 'error');
         });
 
-        // Set height/width on fullscreen
-        player.on('enterfullscreen exitfullscreen', event => {
-            const { target } = player.fullscreen;
-
-            // Ignore for iOS native
-            if (target !== player.elements.container) {
-                return;
-            }
-
-            const toggle = event.type === 'enterfullscreen';
-            const [x, y] = vimeo.ratio.split(':').map(Number);
-            const dimension = x > y ? 'width' : 'height';
-
-            target.style[dimension] = toggle ? `${vimeo.padding}%` : null;
-        });
-
         // Rebuild UI
         setTimeout(() => ui.build.call(player), 0);
     },