Probleem:
Op een website wil je dat een IFRAME altijd 100% breed getoond wordt. Dit is makkelijk in te stellen met width=”100%”. Maar stel dat je een Youtube film via een iframe in wilt laden dan is verhouding met de hoogte heel belangrijk. Height=”100%” gaat dan niet werken want het iframe wordt dan veel te hoog.
Oplossing:
Voeg onderstaand stukje CSS toe aan je CSS bestand om alle iframes standaard op 100% breed te tonen. De hoogte wordt vervolgens berekend via de calc() functie van CSS. De waarde 100vw betekent 100 viewport wat eigenlijk hetzelfde is als 100%. Het getal 0.60 vormt de verhouding en is berekend door de hoogte te delen door de breedte.
iframe {
width: 100%;
height: calc(100vw * 0.60);
}