Primic embed component in vue

[martin.rojas]

Using the embed in vue.

The default ember for a video is using a 300 width size and no clear way to change it. That makes the component essentially useless to use in a real applications.

The documentation shows there is nothing to do.

@prismicio/vue Technical Reference

After hours of searching finally found the source code and the same thing shows no way to pass in any properties.
https://github.com/prismicio/prismic-vue/blob/master/src/components/Embed.js

At minimum in 2021, the embed iframe should just be responsive to the container as default behabior. Making Embedded Content Work In A Responsive iFrame — Smashing Magazine

[Phil (Phil Snow)]

Hey Martin,

So I talked with the team working on this package and the issue is partly with the component and partly with YouTube's Oembed API:

• YouTube's Oembed API returns an iframe that defaults to a default scale (200x150).
• Because Oembed APIs are all different, Prismic's API doesn't do any treatment on these embeds.
• For the same reason, we don't do any treatment on the component, for example, Twitter's Oembed API returns a blockquote + an adjacent script tag.

With that in mind, the sole purpose of the prismic-embed component is to render safely an Oembed field and to wrap its content, may it be an iframe or whatever else (blockquote + adjacent script tag for Twitter). We cannot start to add style exceptions assuming "iframes has to ..."So it's on the user's end to add that style following that pattern:

[data-oembed-provider="YouTube"] iframe { width: 100%; height: 100%; /* or whatever trick they want to use to get the right aspect ratio */ } 

[data-oembed-provider="Twitter"] blockquote { /* ... */ }

We cannot provide a "style" property, because we don't know in advance what to apply it to.

So global (not scoped) style, is the way solve this issue.

Or you can use the deep selector like @lihbr did:
https://github.com/lihbr/lihbr-apex/blob/master/packages/core/src/components/sections/blog/post/Content.vue#L28

I hope this clarifies things.

Thanks.