6 STEPS TO EASILY CREATE A RESPONSIVE YOUTUBE VIDEO
Have you had a situation where you placed an embedded YouTube video on your page and then came to notice that the video was not responsive? You would think that since you grabbed the video embed code directly from YouTube, it would already be responsive and you would not have to worry about it. Nope, the buck gets passed to you. Do not fret, I will show you in six steps how to make your video responsive and also a bonus tip! These are the steps I use when I am not using a framework for building websites.
First lets remove the width and height from the iframe ( the YouTube Video ) going forward I will be referencing the YouTube video you grabbed the embed code by iframe.
Next up, let us add a div around the iframe and give this new div some inline styles. Once we are done, you could always refactor and add classes to make this more robust.
Let us add ‘ position: relative ‘ to the style argument
Next up, we will add ‘ position: absolute ‘ to the iframe, again for this purpose we are using inline styles.
For this step we will now add ‘ height: 100% ‘ and ‘ width: 100% ‘ back to the iframe.
Last but not least, let us add ‘ padding-bottom: 56.25% ‘ to the parent div of the iFrame. You are now done! If you are wondering why we added a padding-bottom 56.25% to the parent of the iFrame, it is because this is the aspect ratio of most videos ( 16:9 ). The math is 9 / 16 * 100 = 56.25. If your aspect ratio is different, then you would do the same just with your numbers.
There you go, you now have a fully mobile responsive YouTube video. Here is a bonus tip: Your YouTube video is now responsive but you do not want to have it full width of your browser or container, I got you. Add a div around the parent container and set the ‘ max-width ‘ to the maximum size you would want your video to be. I go into this in the video as well towards the end.
Thank you for taking the time to check out my blog post on how to create a responsive YouTube video in 6 steps. I hope you visit again soon!
P.S. here is a link to a codepen for the code ( enjoy the video 😉 ): CodePen
