Bottom radius problem on Embedded video

Hey!

I have embedded Youtube video with this tool https://codepen.io/m3g4p0p/pen/KvRdWa

For some reason, I can’t get bottom radius to work when video is playing. From the start, everything works, and then when you click Play the bottom radius disapears.

SEE THIS: Image 2020-02-28 at 3.41.12 PM - if I set higher radius, you can see that the radius is there all the time, but it starts too low. I can’t fix this.

https://preview.webflow.com/preview/bottom-radius-problem?utm_medium=preview_link&utm_source=designer&utm_content=bottom-radius-problem&preview=afda11a4316b7b22dcb54dc687f67bdc&mode=preview

image

That only works for that exact size, but when I start resizing the window down it stops working. I tried setting max-height: 636px, but that too only works for desktop view. Any way to make it responsive?

Thanks for responsing @vincent

Check here and learn a CSS neat trick to control the ratio of your elements.

http://css-square.webflow.io/

I guess if you make a 16/9th div then it will always work.

Or you can remove the radius from the .youtube-player element and set it on the element that’s inside of it…