Responsive Video Embed
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
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.