Embedded YouTube responsive video in a Blog article

[gabriel.hovy (Gabriel)]

Hello Webflowers,

I’m embedding a YouTube video in a blog article with a custom code (because Webflow Rich Tech Editor is limited, I can’t color specfic words).

I put fixed dimensions to size the iframe, it looks great on desktop but it’s too big on mobile because it’s not responsive of course:

This is the HTML code I put with fixed dimensions

<p style="text-align: center"><iframe width ="500" height ="280" src="https://www.youtube.com/embed/ihPpNHiX3vE?autoplay=1&mute=1&wmode=opaque&rel=0" frameborder="0" allowfullscreen=""></iframe></p>

I tried to use % like width =“30%” height =“30%” but the height keeps being the same.

How can I have a YouTube embedded video in the Blog custom code being mobile responsive please?

This is my read-only link:
https://preview.webflow.com/preview/hovy?utm_medium=preview_link&utm_source=designer&utm_content=hovy&preview=a08ccd20092aa9d68d8fb9daa4ac5d80&pageId=642ad82978fd17a2d0d10ad3&workflow=preview

Thanks a lot

[Stan (justAnotherDeveloper)]

hi @gabriel.hovy what research you have done on your own as here is many solved requests for identical issue. Feel free to use search input field (top right) and use keyword “responsive video”

[gabriel.hovy (Gabriel)]

Hi Stan, I checked some of the Help articles but the ones I saw where all talking about div styling outside the code.
When you use the custom code in a Blog article, you don’t have access to the style of the div with Webflow tools you have (like responsive design) for custom code in a page.
Like this answer:

I can’t see the div outside of the custom code block in the article so I can’t chose the size for each device:

I’m still very new to Webflow & HTML/CSS.

Thanks

[Stan (justAnotherDeveloper)]

Make iframe YouTube Video Responsive

How do I make a YouTube video responsive using the embedded HTML and iframe? Looking up this issue on the web I have to put the embedded HTML inside a container which is easy enough but then I need to apply the second style to the iframe: .video-responsive{ overflow:hidden; padding-bottom:56.25%; position:relative; height:0; } .video-responsive iframe{ left:0; top:0; height:100%; width:100%; position:absolute; } How can I apply this CSS to the iframe? I tried applying the CSS to t…