How can we respect the aspect ratio of embeds?

Prismic for Content Creators
1

Hello everyone.

My goal and situation

I am trying to render a RichText field with embeds inside of it. I want this content to be flexible to the browser, including the embed. I am using the CSS method described here on CSS-tricks to make the embeds flexible.

My issue

The issue is that embeds come through with different aspect ratios. Instragram is more square, while YouTube is more letterbox. There is a CSS class appended for the embed domain, and I could planning to support the known embed ratios for domains we commonly embed from.

My question

Is there a better way you have found to do this that doesn't involve hard-coding in all these ratios per embed domain source? Do you use the CSS method? Or do you use a JS solution?

Thanks all

2

Please could you share some generated markup? It’s definitely a CSS thing I think.

I suppose you’ll want the embeds to contain rather than cover (i.e. have a black border where it doesn’t fit).

3

Threads close after a period of inactivity. Flag this thread to re-open it and continue the conversation.