Home

WayneCarl Barker's Portfolio/ Blog

Go Back

How to make an iframe responsive?

Ben Marshall

May 15, 2022

How to make an iframe responses

Do you ever struggle to make your iframes look good and be responsive?

I strongly recomend you look at the explanation to this code on the authors site:

Authors full code example

Just apply the above css to a div that wraps your iframe

        .iframeContainer {
            overflow: hidden;
            padding-top: 56.25%;
            position: relative;
            border: 1.2px solid red;
            background-color: red;
        }

        .iframeContainer iframe {
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
            border: 0;
        }