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) : ''