master-wiki/03. Resources/Development/Iframes.md

created	updated
2024-02-20 11:43	2024-03-12 13:49

How to make an Iframe 100% it's parent width while maintaining the aspect ratio

In this example, we need to wrap the iframe in a container class and provide the following styles:

.container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}