Primic embed component in vue

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.

After hours of searching finally found the source code and the same thing shows no way to pass in any properties.

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

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:

I hope this clarifies things.

Thanks.

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.