How to make a Responsive iframe in CSS (2023)

How to make a Responsive iframe in CSS (2023)

WordPress 6.0 is finally here. Reading How to make a Responsive iframe in CSS (2023) 2 minutes Next Learn JavaScript Rest Parameter in 1 minute

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 before code
iframe before

After:

Responsive iframe html

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

Our Coding guides: 

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.

Leave a comment

All comments are moderated before being published.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.