Using the embed component, we are stuck with whatever dimensions are embedded in the 'html' field, as there may be other sources rather than youtube, and splitting a URL to add /embed/ to a path is prone to error.
Is there any way we can just get the embed link sans dimensions? Maybe even just the embed URL exposed 'kind of like the author_url?'
Hey @mark, thanks for reaching out
What sort of field is author_url in your repo?
The Embed field doesn't have the option to allow you to edit the content of the URL. In this case, you have two options.
Author_url is a field that prismic parses from the embed link to the creators channel. Since there's 'magic' happening for that, I figured it'd be simple enough to just expose an embed html link that uses 'with=100%' etc, or allows dimensions (or aspect ratio) to be used.
Using an embed to a YouTube video that's 200px wide doesn't really help me.
Ok, I see. In that case, yes, the custom HTML field would be the best option to customize the output of the URL. There isn't a straightforward path to changing Youtube's default settings in the URLs or iframes.
We've had similar discussions about this in the past, here's an example:
I'm trying to use the htmlSerializer, but it doesn't seem to be affecting the output at all...
Ok, I see, so you're trying to parse the Embed from a Rich Text field rather than an Embed field alone.
I'm interested to see how you build your serializer and how you're using it in your Rich text helper component. Maybe the problem comes from the code.
Do you have access to this info?
The fields I'm getting are coming from Prismic's embed component. I can get the iFrame HTML directly by doing doc.data.embed.html, but it has the dimensions baked into the iframe code. If I use doc.data.embed.url I get the URL, but the iFrame has to come from youtube.com/embed/* - not the direct link. I'm not sure how Prismic is using oEmbed to generate that embed code. I just wish there was a field or option to omit or specify fluid values. It seems like an easy thing to do.
I see. The solution would be to modify the fields once they're retrieved from the API in your application. Since these fields are specific to the video hosting site, in this case, Youtube, it is not possible to change the values that the embed has, and that is why they cannot be modified from Prismic.
Aren't they generated from oEmbed?
The Embed field only accepts valid oEmbed URLs.
So, if you need to customize the output or the values in an iframe, that's why we recommend using a custom HTML field instead.
My hope was to just have people put links in and have the code generated. Like the embed option, only where the dimensions are fluid.
I understand. At the moment, we don't have plans to change the behavior of this field. However, we have had talks about increase the functionality and options of the Embed field. If we ever make any changes, we'll let everyone know. For the moment making your own field is still the most viable solution.
I was able to solve this by serializing the embed object. More info below...