Embed Links - Modify width and height of the embed

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.

Help please.

Hi @aadtyaraj01 ,

These previous threads should help:

Thanks.

1 Like

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;
}

1 Like

For reference, here's a way to do it with simple CSS: