Responsive Video Embed

António Regadas
Feb 14, 2017 · 2 min read

Lately I’ve found myself trying to make an embedded youtube video responsive… and guess what? It wasn’t “plug&play” easy. Eventually I’ve found a solution that works like a charm and therefore to pin it for good, I’ve decided to share it with you.
This easy solution is more like a snippet of code, but still useful and it works across all the major browsers, I even tested it in Internet Explorer 10, bulletproof… rofl.

What I needed:
The video to resize depending on the browser size, but when you add the video to the page it has a fixed height and width. But guess what setting the width to 100% will not automatically resize it to the parent container. Proportionally I mean.

How I fixed it:

First thing first we wrap the responsive youtube embed code with a beautiful

and specify a % value between 50% and 60% padding bottom, whatever you think looks good.
Second step target the child iframe from youtube and set it to width: 100%; and height: 100%;, with position: absolute;.
Finally, 3rd and last step you can remove the inline width and height from the html element.

Your final piece of code should look like this:

All done, your video should be responsive and ready to view on every browser resolution.
What did you think about this solution? Feel free to comment and propose a different approach to solve this issue.

Keep on coding.
Thanks for reading :)

Follow me on Medium if you enjoy reading my content.

António Regadas

Written by

Hi I’m aDeveloper | Foodie | Love a good wine | Reading | Explore new places | Techie | apregadas@gmail.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade