Mediální element

<iframe>

Vložená stránka. Okno, kterým do vašeho webu nahlíží jiný web: mapa, video z YouTube, formulář.

V náhledu vidíte, kam se dostaneme. Skrolujte dolů a postavíme to krok za krokem.

Mapa se načítá z OpenStreetMap, takže je potřeba připojení k internetu.

Zápis

Okno do jiné stránky

iframe je párový tag a src je adresa stránky, která se v něm zobrazí. Služby jako mapy nebo YouTube mají pro vložení vlastní adresu.

Bez stylů má rámec jen 300 × 150 pixelů a šedý border.

Atributy

Název a rozměry

title je povinný: screen reader podle něj pozná, co v rámci je. width a height nastaví velikost a loading="lazy" rámec načte, až se k němu čtenář doskroluje.

Atributy

Video z YouTube

Kód pro vložení najdete u videa pod tlačítkem Sdílet → Vložit. allow povolí rámci funkce, jako je přehrávání přes celou obrazovku.

Adresa youtube-nocookie.com neukládá návštěvníkům cookies, dokud video nepustí.

Bezpečnost

Cizí stránka, cizí pravidla

Do iframe vkládáte kód někoho jiného. Vkládejte jen z webů, kterým věříte. U neznámého obsahu omezte, co smí, atributem sandbox.

Spousta webů se vložit nedá, protože to samy zakazují. Třeba banka nebo Google. Rámec pak zůstane prázdný.

Styl

Bez borderu, přes celou šířku

Šedý border zrušíme a rámec roztáhneme na šířku obsahu. Zaoblené rohy ho propojí s ostatními prvky stránky.

Šířka sedí, ale výška zůstala z atributu: 360 pixelů. Na úzkém displeji by mapa byla placka.

Styl

Poměr stran místo výšky

Rámec na rozdíl od obrázku neví, jaký má mít tvar. aspect-ratio mu poměr stran řekne a height: auto zruší výšku z HTML. Výška se pak dopočítá ze šířky.

Responzivita

Na telefonu vyšší mapa

Široká mapa 16 : 9 je na telefonu nízký proužek a prst se v ní špatně posouvá. Na úzkém displeji jí dáme čtvercový tvar.

U videa z YouTube nechte 16 : 9 všude. Video má pevný tvar a navíc by se kolem něj objevily černé pruhy.

Shrnutí

Jak vkládat cizí stránky

Ano

title u každého rámce
loading="lazy", rámce bývají těžké
width: 100% a aspect-ratio
vkládat jen z důvěryhodných webů, jinak sandbox

Ne

pevná výška, která na telefonu nesedí
iframe pro vlastní obsah, který jde napsat přímo do stránky

Další: <table> →