master-wiki/03. Resources/Development/Iframes.md
aleidk c84ad03d4c Update from obsidian - thinkpad
Affected files:
.obsidian/app.json
.obsidian/graph.json
.obsidian/plugins/obsidian-omnivore/data.json
.obsidian/plugins/update-time-on-edit/data.json
01. Projects/Fuuka/Outline.md
01. Projects/Juuno/Outline.md
01. Projects/Renuncia/Renuncia.md
02. Areas/Dotfiles/dotfiles tasks.md
02. Areas/Escape Latam/Canada.md
02. Areas/Escape Latam/Comparación de Paises.md
02. Areas/Escape Latam/Escapar de Latam.md
02. Areas/Escape Latam/New Zeldand.md
03. Resources/Development/Feature shipment checklist.md
03. Resources/Development/Fix messy commits.md
03. Resources/Development/Git.md
03. Resources/Development/Iframes.md
03. Resources/Development/Revert old changes in a codebase.md
03. Resources/Development/Search for a bug.md
03. Resources/Notetaking/Habits.md
Read Later/2024-02-12 - Debouncing in JavaScript – Explained by Building Auto-Complete Functionality in React.md
notes/Git.md
2024-02-20 12:23:30 -03:00

450 B

created updated
2024-02-20 11:43 2024-02-20 11:45

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%;
}