Vložení iframe na Webové stránky je běžnou praxí, pokud potřebujete zahrnout obsah z jiného zdroje, jako jsou video přehrávače nebo interaktivní mapy. Nicméně, pokud chcete zajistit, že váš iframe bude responzivní a dobře se přizpůsobí různým zařízením a šířkám obrazovek, potřebujete správný kód. Zde je jednoduchý kód pro responzivní iframe:
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
<iframe src="https://www.example.com" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;" allowfullscreen></iframe>
</div>
Jak funguje tento kód?
<div> kontejner obsahuje iframe a nastavuje poměr stran pro responzivitu.padding-bottom: 56.25%; určuje poměr stran (16:9), který umožní iframe přizpůsobit se šířce kontejneru.position: relative; udržuje relativní pozici kontejneru, což je důležité pro pozici iframe.position: absolute; umožňuje iframe vyplnit celý prostor v rámci kontejneru.top: 0; left: 0; zarovnává iframe v levém horním rohu kontejneru.width: 100%; height: 100%; zajistí, že iframe zabere veškeré dostupné místo uvnitř kontejneru.border: 0; odstraní okraje iframe.allowfullscreen povoluje režim celé obrazovky pro vložený obsah, pokud je to podporováno.
Tento kód zajistí, že váš iframe bude responzivní a pěkně se přizpůsobí různým velikostem obrazovky, což je důležité pro uživatelsky příjemnou a konzistentní webovou stránku.
