Unable to change dimensions of Youtube video - Gatsby

[juliannasielski]

I am using the embed element and querying it in my HTML with .html which works perfectly fine, but I can't seem to figure out how to change the dimensions of the video itself. I added &maxwidth=900&maxheight=200 to my initial link that I added in Prismic, but it doesn't change anything. Any other solutions or ideas?

[Pau]

Hello Julian, welcome to the Community!

• Which kind of video source are you embedding to your Prismic fields, could you share it with me?
• Are you wrapping it inside an iframe or a video tag maybe?

[juliannasielski]

Hey there!
I'm using Youtube videos, and I'm using graphql to query the HTML. the HTML that's automatically generated from a YouTube video is an iframe of course, and has specific dimensions that I can't seem to change (480 x 270).

I'm querying everything correctly, but the "html" that's given doesn't allow me to change the dimensions. I can't use the embed_url as seen in the screenshot, because youtube doesn't allow you to embed something into an iframe without having "/embed/" in the URL, and prismic won't allow a URL with /embed/ in it (it says "This URL doesn't support oEmbed spec"). So basically, my only option is to use the automated iframe with the tiny dimensions.

Hope that makes sense!

[Pau]

Ok, i see what you mean now, and you're right, there's no way of changing that from inside Prismic, and it's weird that the url doesn't recognise the added values. You can do two things instead:

• Paste the iframe directly into a Prismic field with the correct width and height and then render it as raw HTML:

Adding Custom Embed or HTML code

• Or one option that will require a few more lines of code which is, get the iframe from the Embed and then parse the string to modify the width and height values

[bohdan.anderson]

This is still an issue, is there any other fixes we can do other than embeding our own HTML. We built a editor for a client and it was previously working and now this is not. Can there be further investigation into this.
Was this a change from youtube?

The videos are for ants

[Pau]

Hello @bohdan.anderson, this is still the best approach for changing the default width and height settings from Youtube.

1. Create a Key Text field and add your iframe
2. Query the field
3. Use dangerouslySetInnerHTML to template the result:

import React from 'react'

const VideoComponent = ({ videoIframe }) => (
  <>
    <div dangerouslySetInnerHTML={{ __html: videoIframe }} />
  </>
)

export default VideoComponent

Is this not a suitable solution for your project? Let me know your thoughts, I can add them as part of a feature request.

Thanks

[maxim (Maxim Andreev)]

Hi, this is not a suitable solution for our project as we use the rich-text-field as part of a larger component.

[Pau]

Hey @maxim, thank you for joining the community

You can do this by adding the preformatted text option to your Rich text field. Then you'll just need to add this format to paste the iframe, like in this example:

Afterward, you'll need to configure an HTML serializer to detect the text of the type preformatted to render it as HTML.

You'll see something like this as part of the Rich text result:

{
  "type":"preformatted",
  "text":"<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/3Xw-9OE1j-Y\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>",
  "spans":[ ]
}

[bohdan.anderson]

I think these all options make sense as solutions, it's just editing a client's website that is in production that hasn't been touched in a long time is a time suck, if we could of just edit prismic it would have been amazing - but it looks like it's not an option.

We've actually just gone with overriding the sizes of the iframes by forcing them with css.

[Pau]

Thank you for sharing your solution @bohdan.anderson.

I understand that for these specific cases, the solutions aren't the most comfortable; we have thought about changing the behavior of the Embed field, but there is not yet an estimated time for when this could be modified. Meanwhile, I can mark this thread as an open feature request.

Follow our progress page to learn about all that we're currently working on.

[guillaume3 (Guillaume Bisch)]

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