From 99e2db76dc96aa5a9de823a838b71d3cbc630eee Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Tue, 4 Jan 2022 10:00:21 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20Spotify=20and=20Soundclo?=
 =?UTF-8?q?ud=20embeds=20having=20overly=20long=20containers=20in=20editor?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

closes https://github.com/TryGhost/Team/issues/871

- when determining the size of the iframe containing a nested iframe in the embed card we were incorrectly treating a `100%` width attribute as a `100px` attribute and ending up with a completely incorrect ratio calculation
- added a conditional to ignore %-width attributes when calculating a ratio for a nested iframe
- if we have a nested iframe with a %-width but a fixed height, use that fixed height for the outer container iframe
---
 .../addon/components/koenig-card-embed.js     | 29 +++++++++++++------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-embed.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-embed.js
index cd81935a84..1d451c432e 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-embed.js
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-embed.js
@@ -316,21 +316,32 @@ export default Component.extend({
         iframe.style.height = null;
 
         // get ratio from nested iframe if present (eg, Vimeo)
-        let firstElement = iframe.contentDocument.body.firstChild;
+        const firstElement = iframe.contentDocument.body.firstChild;
         if (firstElement.tagName === 'IFRAME') {
-            let width = parseInt(firstElement.getAttribute('width'));
-            let height = parseInt(firstElement.getAttribute('height'));
-            if (width && height) {
-                let ratio = width / height;
-                let newHeight = iframe.offsetWidth / ratio;
-                firstElement.style.height = `${newHeight}px`;
-                iframe.style.height = `${newHeight}px`;
+            const widthAttr = firstElement.getAttribute('width');
+
+            if (widthAttr.indexOf('%') === -1) {
+                const width = parseInt(firstElement.getAttribute('width'));
+                const height = parseInt(firstElement.getAttribute('height'));
+                if (width && height) {
+                    const ratio = width / height;
+                    const newHeight = iframe.offsetWidth / ratio;
+                    firstElement.style.height = `${newHeight}px`;
+                    iframe.style.height = `${newHeight}px`;
+                    return;
+                }
+            }
+
+            const heightAttr = firstElement.getAttribute('height');
+            if (heightAttr.indexOf('%') === -1) {
+                const height = parseInt(firstElement.getAttribute('height'));
+                iframe.style.height = `${height}px`;
                 return;
             }
         }
 
         // otherwise use iframes internal height (eg, Instagram)
-        let height = iframe.contentDocument.scrollingElement.scrollHeight;
+        const height = iframe.contentDocument.scrollingElement.scrollHeight;
         iframe.style.height = `${height}px`;
     },