Unable to change dimensions of Youtube video - Gatsby

Developing with Prismic
,
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
      }"
      data-oembed-type="${element.oembed.type}"
      data-oembed-provider="${element.oembed.provider_name}"
      ${label(element)}>
      ${element.oembed.html
        .replace(/width="\d+"/, `class="w-full aspect-video mb-8"`)
        .replace(/height="\d+"/, "")}
    </div>`;
    default:
      return null;
  }
}

then used with

const html = content ? PrismicDOM.RichText.asHtml(content, undefined, htmlSerializer) : ''
1 Like