How to make a Responsive iframe in CSS (2022)

Written by Shan Shah
Updated on June 7, 2022
2 mins read
responsive iframe in css

Making a responsive iframe is challenging, especially for YouTube videos.

When you try to embed the YouTube video inside the website, you will see that the embedded video is not properly responsive according to the aspect ratio.

Follow this tutorial if you are looking for a solution to make a responsive iframe for any use case, mainly a YouTube iframe.

Before:

iframe non-responsive code
iframe out before making it reponsive

After:

iframe responsive html code

Responsive iframe (Key Points)

  • An outside container or wrapper around the iframe element is very important.
  • Remove the static width and height from the iframe and add CSS class to it.
  • Don't set the width or height for the iframe-wrapper.

For the iframe-wrapper put the following styles:

  • Set position to relative
  • Add 56.25% padding-top (Ratio 16:9)
  • Make overflow hidden

For the iframe class, put the following styles:

  • Set position to absolute
  • Add 100% width and height
  • left and top property to 0

Now, place it somewhere inside the parent container where you can set the proper width for your embedded video.

responsive iframe css
responsive iframe output

Conclusion

In this tutorial, you learned about how to make an iframe response. You will see how often this solution can help you in your web development career.

I have another guide for you about CSS grids. Go ahead and learn to make responsive websites fast.

For more quick solutions for web development. Don't forget to subscribe to our newsletter.

Project Based Tutorials
Tips & Tricks
Modern Technologies
Real-World Challenges
Creative Content
Build-Apps from Scratch
Web Development Content
17+ Videos Published
Coder Champ © 2021 - 
Privacy Policy
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram