IFRAME 100% breed met juiste hoogte verhouding via CSS

CSS gebruiken om juiste breedte/hoogte van Youtube video te berekenen.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);
    }
IFRAME 100% breed met juiste hoogte verhouding via CSS
Beoordeel dit blog

Laat een reactie achter

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.