responsive iframe in css

How to make a Responsive iframe in CSS (2023)

Table of content

    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.



    iframe before code
    iframe before


    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: 


    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.