Join the Webstudio community

Updated 18 hours ago

How to Create a Responsive YouTube Embed

At a glance

The community member posted a question about how to make a responsive YouTube embed. Another community member provided a solution, suggesting to use a box > embed code approach, where the height and width of the embed code are set to 100% and the aspect ratio of the parent box is set to 16/9 (or any desired ratio). The original poster thanked the community member for the solution.

Does anyone know how to make a resonsive YouTube embed? (Edit: Looks like Hall AI has some ideas I'll try later)
Marked as solution
box > embed code

  • on the embed code change the height/width to 100%
  • on the box parent change the aspect ratio to 16/9 (or whatever you want).
That's it.
View full solution
J
L
5 comments
box > embed code

  • on the embed code change the height/width to 100%
  • on the box parent change the aspect ratio to 16/9 (or whatever you want).
That's it.
So that worked, but I was also able to set the aspect ratio on the embed element itself. Is there any reason to have a parent box?
(For anyone else that reads this I set the embed code height and width to 100% but the styling on the embed element has the ratio and actual sizes)
I'm just used to controlling it by the parent. If you test your site on different devices/browsers and it's fine, then go with your solution. πŸ™‚
Add a reply
Sign up and join the conversation on Discord