From 438e42583859eed0d2e9fd1a00b9cdc32a71f9b4 Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Sun, 18 Apr 2021 16:58:44 +1000
Subject: fix: aspect ratio improvements (#2171)

- Use CSS aspect-ratio (retain fallback for legacy browsers)
- Round aspect ratios (fixes YouTube black border issue)
---
 src/js/plugins/vimeo.js   | 4 ++--
 src/js/plugins/youtube.js | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

(limited to 'src/js/plugins')

diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js
index ea001441..10246c66 100644
--- a/src/js/plugins/vimeo.js
+++ b/src/js/plugins/vimeo.js
@@ -11,7 +11,7 @@ import fetch from '../utils/fetch';
 import is from '../utils/is';
 import loadScript from '../utils/load-script';
 import { format, stripHTML } from '../utils/strings';
-import { setAspectRatio } from '../utils/style';
+import { roundAspectRatio, setAspectRatio } from '../utils/style';
 import { buildUrlParams } from '../utils/urls';
 
 // Parse Vimeo ID from URL
@@ -294,7 +294,7 @@ const vimeo = {
     // Set aspect ratio based on video size
     Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then((dimensions) => {
       const [width, height] = dimensions;
-      player.embed.ratio = [width, height];
+      player.embed.ratio = roundAspectRatio(width, height);
       setAspectRatio.call(this);
     });
 
diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js
index db5781e6..19d2f1a5 100644
--- a/src/js/plugins/youtube.js
+++ b/src/js/plugins/youtube.js
@@ -11,7 +11,7 @@ import loadImage from '../utils/load-image';
 import loadScript from '../utils/load-script';
 import { extend } from '../utils/objects';
 import { format, generateId } from '../utils/strings';
-import { setAspectRatio } from '../utils/style';
+import { roundAspectRatio, setAspectRatio } from '../utils/style';
 
 // Parse YouTube ID from URL
 function parseId(url) {
@@ -90,7 +90,7 @@ const youtube = {
           ui.setTitle.call(this);
 
           // Set aspect ratio
-          this.embed.ratio = [width, height];
+          this.embed.ratio = roundAspectRatio(width, height);
         }
 
         setAspectRatio.call(this);
-- 
cgit v1.2.3