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.