6 STEPS TO EASILY CREATE A REPONSIVE 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.

  1. 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. image of html code
  2. Next up, let us add a div around the iframe and give this new div a class of video__iframe so we can add some styles to this div. I use BEM for my naming convention, this is why you see the ' __ ' ( double underscore ). If you have not heard of BEM, I recommend checking it out. Depending on your needs, you may want to add your styles to your stylesheet or as a component. For this purpose, we will add the styles to the parent div inline. image of html code
  3. Add ' position: relative ' to the class .video__parent image of html code
  4. Add ' position: absolute ' to the iframe, again for this purpose we are using inline styles. image of html code
  5. This step we will now add ' height: 100% ' and ' width: 100% ' back to the iframe. image of html code
  6. Last but not least, let us add ' padding-bottom: 56.25% ' to .video__parent You are now done! If you are wondering why we added a padding-bottom 56.25% to our .video__parent, 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. image of html code

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 .video__parent 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. image of finished html code

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!

- mauro m. | November 24, 2018