I cannot adjust the width and height of an embed field in which I'm pasting a YouTube Link.
The only prop available for PrismicEmbed is the field prop.
I've also tried using the {@html slice.primary.embed.html} but that doesn't work, as I'm then unable to set the width and height.
I also tried to set the width and height directly in the javascript part of the svelte component yet no luck.
So for now I'm relying on this snippet to replace the width and height values:
/**
* Resizes the width and height attributes of an iframe in an HTML string.
*
* @param {string} html - The original HTML string containing the iframe.
* @param {number} newWidth - The new width to set for the iframe.
* @param {number} newHeight - The new height to set for the iframe.
* @returns {string} The modified HTML string with updated width and height.
*
* @example <caption>Resize a YouTube embed iframe</caption>
* {@lang javascript}
* const originalHtml = '<iframe width="200" height="113" src="https://www.youtube.com/embed/gBrmnB5aOSI" frameborder="0" allowfullscreen></iframe>';
* const resizedHtml = resizeVideoIframe(originalHtml, 400, 225);
* console.log(resizedHtml);
* // Output: '<iframe width="400" height="225" src="https://www.youtube.com/embed/gBrmnB5aOSI" frameborder="0" allowfullscreen></iframe>'
*/
function resizeVideoIframe(html, newWidth, newHeight) {
// Use regular expressions to replace width and height
const patternWidth = /width="\d+"/;
const patternHeight = /height="\d+"/;
// Replace width
html = html.replace(patternWidth, `width="${newWidth}"`);
// Replace height
html = html.replace(patternHeight, `height="${newHeight}"`);
return html;
}