Image for post
Image for post

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:

.video-wrapper {
position: relative;
height: 0;
padding-bottom: 55%;
overflow: hidden;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
<div class="video-wrapper">
frameborder="0" allowfullscreen

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.

Written by

Hi I’m aDeveloper | Foodie | Love a good wine | Reading | Explore new places | Techie |

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store