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 the embedded HTML object but that doesn’t work.

Would be really grateful if there’s a solution to this as it’s driving me up the wall!!

(The area in question is “Case Study 4” in the pop-up light-box, Slide 2

Thank you.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Everything that’s inside of your embed component must be declared at 100% width.

Then you create a DIV in webflow to put it inside, and you change the div’s width for each device.