# Embed Links - Modify width and height of the embed

**URL:** <https://community.prismic.io/t/embed-links-modify-width-and-height-of-the-embed/16420>\
**Category:** Developing with Prismic\
**Tags:** svelte, social-media-embeds\
**Created:** [July 29, 2024, 11:22am UTC](https://community.prismic.io/t/embed-links-modify-width-and-height-of-the-embed/16420 "2024-07-29T11:22:01Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![aadtyaraj01](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/aadtyaraj01/32/7310_2.png) [@aadtyaraj01](https://community.prismic.io/u/aadtyaraj01)\
**Post date:** [July 29, 2024, 11:22am UTC](https://community.prismic.io/t/embed-links-modify-width-and-height-of-the-embed/16420/1 "2024-07-29T11:22:01Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [July 29, 2024, 12:52pm UTC](https://community.prismic.io/t/embed-links-modify-width-and-height-of-the-embed/16420/2 "2024-07-29T12:52:36Z")

</div>

Hi @aadtyaraj01 ,

These previous threads should help:

> [@Embeded Videos with control of related videos](https://community.prismic.io/t/embeded-videos-with-control-of-related-videos/5728/2):
>
> Hi Stefan, You can indeed control youtube videos as described here: Unless something has changed. In which case, if this doesn't work, the custom embed option will work: Also like you said, recommending your own playlists is the only option:

> [@Unable to change dimensions of Youtube video - Gatsby](https://community.prismic.io/t/unable-to-change-dimensions-of-youtube-video-gatsby/2777/19):
>
> We have used successfuly a custom serializer to update the raw html of the embed. Here replacing the width attribute with Tailwind CSS classes. // documentation at https://prismic.io/docs/core-concepts/html-serializer function label(element) { return element.label ? ` class="${element.label}"` : ""; } export default function htmlSerializer(type, element, content, children) { switch (type) { case "embed": return `\<div data-oembed="${ element.oembed.embed\_url }" …

Thanks.

---

<div class="post-metadata">

**Author:** ![aadtyaraj01](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/aadtyaraj01/32/7310_2.png) [@aadtyaraj01](https://community.prismic.io/u/aadtyaraj01)\
**Post date:** [July 30, 2024, 2:52am UTC](https://community.prismic.io/t/embed-links-modify-width-and-height-of-the-embed/16420/3 "2024-07-30T02:52:17Z")

</div>

So for now I'm relying on this snippet to replace the width and height values:

```auto
/**
 * 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;
}

```

---

<div class="post-metadata">

**Author:** ![Ezekiel](https://avatars.discourse-cdn.com/v4/letter/e/848f3c/32.png) [@Ezekiel](https://community.prismic.io/u/Ezekiel)\
**Post date:** [October 3, 2024, 2:41pm UTC](https://community.prismic.io/t/embed-links-modify-width-and-height-of-the-embed/16420/4 "2024-10-03T14:41:22Z")

</div>

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

> [@Video Embedding - advice to change size/width/height of youtube embedded video](https://community.prismic.io/t/video-embedding-advice/212/15):
>
> For reference, size of embedded videos can be controlled via CSS directly. This is an example on a NextJS project, where .video is the embedded video's parent container. .video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; width: 100%; } .video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

---

<div class="post-metadata">

**Author:** ![kehindephilip15](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/kehindephilip15/32/8432_2.png) [@kehindephilip15](https://community.prismic.io/u/kehindephilip15)\
**Post date:** [May 27, 2025, 11:44am UTC](https://community.prismic.io/t/embed-links-modify-width-and-height-of-the-embed/16420/5 "2025-05-27T11:44:37Z")

</div>

Hi @aadtyaraj01  
Here is my own solution using a custom RichText component

```auto
.iframe {
  margin-block: 3.12rem;
  width: 100% !important;
  overflow-y: hidden;

  & iframe {
    width: 100% !important;
    height: inherit !important;
  }
}

```

```auto
const reconstructEmbedUrl = (originalUrlString) => {
  if (!originalUrlString) {
    return originalUrlString;
  }

  try {
    const tempUrl = new URL(originalUrlString);
    const hostname = tempUrl.hostname.toLowerCase();
    const pathname = tempUrl.pathname;

    if (hostname.includes('youtube.com') || hostname.includes('youtu.be')) {
      let videoId = null;
      if (hostname.includes('youtu.be')) {
        videoId = pathname.substring(1);
      } else if (pathname.includes('/watch')) {
        videoId = tempUrl.searchParams.get('v');
      } else if (pathname.includes('/embed/')) {
        videoId = pathname.split('/embed/')[1]?.split('/')[0];
      }

      if (videoId) {
        const embedUrl = new URL(`https://www.youtube.com/embed/${videoId}`);
        embedUrl.searchParams.set('rel', '0');
        if (tempUrl.searchParams.has('t')) {
          embedUrl.searchParams.set(
            'start',
            tempUrl.searchParams.get('t').replace('s', ''),
          );
        }
        return embedUrl.toString();
      }
    }

    if (hostname.includes('vimeo.com')) {
      const pathParts = pathname.split('/');
      const videoId = pathParts.pop() || pathParts.pop();

      if (videoId && /^\d+$/.test(videoId)) {
        if (
          hostname.includes('player.vimeo.com') &&
          pathname.includes('/video/')
        ) {
          return originalUrlString;
        }
        return `https://player.vimeo.com/video/${videoId}`;
      }
    }
  } catch (e) {
    return originalUrlString;
  }

  return originalUrlString;
};

```

```auto
 embed: ({node}) => {
    let url;
    let customHeight;

    try {
      const initialEmbedUrlString = node.oembed?.embed_url;
      if (
        !initialEmbedUrlString ||
        typeof initialEmbedUrlString !== 'string' ||
        initialEmbedUrlString.trim() === ''
      ) {
        console.log('Embed URL string is invalid, returning null.');
        return null;
      }

      const reconstructedEmbedUrlString = reconstructEmbedUrl(
        initialEmbedUrlString,
      );

      url = new URL(reconstructedEmbedUrlString);
      customHeight = url.searchParams.get('height');

      if (customHeight) {
        url.searchParams.delete('height');
      }
    } catch (error) {
      console.error(
        'Error processing embed URL:',
        node.oembed?.embed_url,
        error,
      );
      return null;
    }

    if (!node.oembed) {
      console.error('Missing oembed data for node, returning null:', node);
      return null;
    }

    if (node.oembed.html) {
      // PrismicRichText might render this HTML directly, ignoring the custom iframe structure below. Attempting to wrap it.',
      return (
        <div
          className={styles.iframe}
          style={{
            height: customHeight ? `${customHeight}px` : 400,
            position: 'relative',
            width: '100%',
          }}
          dangerouslySetInnerHTML={{__html: node.oembed.html}}
        />
      );
    }

    return (
      <div
        className={styles.iframe}
        style={{
          height: customHeight ? `${customHeight}px` : undefined,
          position: 'relative',
          width: '100%',
        }}
      >
        <iframe
          style={{
            position: !customHeight ? 'absolute' : undefined,
            top: !customHeight ? 0 : undefined,
            left: !customHeight ? 0 : undefined,
            width: '100% !important',
            height: customHeight
              ? `${customHeight}px`
              : !customHeight
                ? '100%'
                : 230,
          }}
          src={url.toString()}
          title={node.oembed.title || 'Embedded content'}
          data-oembed={node.oembed.embed_url}
          data-oembed-type={node.oembed.type}
          data-oembed-provider={node.oembed.provider_name}
          frameBorder='0'
          allowFullScreen
          loading='lazy'
        />
      </div>
    );
  },

```