Někdy chcete na stránku vložit obsah, který vznikl jinde: mapu, video nebo formulář. K tomu slouží značka iframe. Otevře na stránce jiný dokument v malém okně.
Základní zápis
<iframe src="https://www.example.com/mapa" width="600" height="400" title="Mapa k nám" loading="lazy"></iframe>Atribut src říká, co se má zobrazit. Atributy width a height určují rozměry v pixelech. Atribut title popisuje obsah pro čtečky obrazovky, proto ho vyplňujte vždy. Atribut loading="lazy" odloží načtení, dokud se okno nedostane do zobrazené části stránky.
Video z YouTube
U videa na YouTube najdete tlačítko Sdílet a v něm možnost Vložit. Zkopírujete z něj hotový kód. Adresa v atributu src má tvar s částí embed a identifikátorem videa.
<iframe width="560" height="315" src="https://www.youtube.com/embed/ID_VIDEA" title="Ukázka videa" allowfullscreen loading="lazy"></iframe>Cizí obsah a cookies
Vložený obsah může nastavit vlastní cookies a sledovat návštěvníky. Zvažte, zda ho opravdu potřebujete. Pokud ho používáte, uveďte to v zásadách ochrany osobních údajů a na webu s lištou souhlasu s cookies na to pamatujte.
Časté chyby
- Chybějící title. Čtečka obrazovky neřekne, co rámeček obsahuje.
- Špatná adresa. U YouTube musí být v src adresa embed, ne běžný odkaz na video.
- Pevná šířka na mobilu. Iframe se šířkou 600 pixelů přeteče na telefonu. Použijte CSS s max-width 100 procent.
- Neuvědomělé sledování. Cizí obsah může sledovat návštěvníky. Napište to v zásadách.
Teď umíte na stránku vložit cizí obsah bezpečně a přehledně. Tím je celá řada HTML návodů hotová. 👍
Všechny návodyNechcete web řešit sami a chcete ho mít hotový a profesionální?
Podívejte se na tvorbu webů →© Ondřej Šteigl. Návody vznikají ve spolupráci s Claude (AI) a jsou upravovány autorem. Autorská práva k vlastním úpravám a příkladům náleží Ondřeji Šteiglovi. Kopírování nebo šíření celých textů bez písemného souhlasu je zakázáno. Výukové použití je vítáno, uveďte prosím zdroj (osteigl.cz).
