TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-25 20:03:12 +03:00
Code Issues Projects Releases Wiki Activity

🐛 Fixed Spotify and Soundcloud embeds having overly long containers in editor

Browse Source 
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
This commit is contained in:
Kevin Ansfield 2022-01-04 10:00:21 +00:00
parent b81f5fa340
commit 99e2db76dc
1 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
ghost/admin/lib/koenig-editor/addon/components/koenig-card-embed.js
View File

@ -316,21 +316,32 @@ export default Component.extend({
iframe.style.height = null; iframe.style.height = null;
// get ratio from nested iframe if present (eg, Vimeo) // 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') { if (firstElement.tagName === 'IFRAME') {
let width = parseInt(firstElement.getAttribute('width')); const widthAttr = firstElement.getAttribute('width');
let height = parseInt(firstElement.getAttribute('height'));
if (widthAttr.indexOf('%') === -1) {
const width = parseInt(firstElement.getAttribute('width'));
const height = parseInt(firstElement.getAttribute('height'));
if (width && height) { if (width && height) {
let ratio = width / height; const ratio = width / height;
let newHeight = iframe.offsetWidth / ratio; const newHeight = iframe.offsetWidth / ratio;
firstElement.style.height = `${newHeight}px`; firstElement.style.height = `${newHeight}px`;
iframe.style.height = `${newHeight}px`; iframe.style.height = `${newHeight}px`;
return; 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) // otherwise use iframes internal height (eg, Instagram)
let height = iframe.contentDocument.scrollingElement.scrollHeight; const height = iframe.contentDocument.scrollingElement.scrollHeight;
iframe.style.height = `${height}px`; iframe.style.height = `${height}px`;
}, },