Iframe

Značka <iframe> (inline frame) je jako malé okno, které můžeme vložit do své webové stránky a ukázat v něm obsah z jiné webové stránky nebo dokumentu! Je to super, když chceme ukázat třeba video z YouTube nebo mapu z Googlu přímo na své stránce.

Je to samouzavírací značka.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2559.6200230006764!2d14.42076041577908!3d50.08000497942691!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470b940989f6b9c9%3A0x6b4c4d0e6b0a6b4c!2sStarom%C4%9Bstsk%C3%A9%20n%C3%A1m.%2C%20Star%C3%A9%20M%C4%9Bsto%2C%20Praha!5e0!3m2!1scs!2scz!4v1625078400000!5m2!1scs!2scz" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

Důležité atributy:

src: Adresa (URL) obsahu, který chcete vložit.
width a height: Velikost okna iframu.
style="border:0;": Často se používá k odstranění výchozího rámečku kolem iframu, aby to vypadalo lépe.

Vkládání YouTube videí:

Pokud chceme vložit video z YouTube, nemusíme umět moc kódu. Jděme na YouTube, najděme si video, které chceme, klikněme na "Sdílet" a pak na "Vložit". YouTube vám vygeneruje speciální <iframe> kód, který jen zkopírujeme a vložíme na svou stránku!

Důležité upozornění: Ne všechny webové stránky dovolují, abychom je vložili do iframu. Některé velké stránky (jako Google.com) to blokují z bezpečnostních důvodů. Takže pokud nám to nefunguje s nějakou stránkou, je to pravděpodobně tím, že to zakázaly. Ale s YouTube nebo Google Maps to funguje skvěle!

Cvičení: Okno do světa!

Úkol: Vytvořme novou sekci <h2> "Videokoutek".

Jděme na YouTube a najděme si své oblíbené video.
Pod videem klikněme na "Sdílet" a pak na "Vložit". Zkopírujme celý kód, který se nám tam objeví.
Vložme tento kód do svého HTML souboru v sekci "Videokoutek".
Uložme a podívejme se, jak se video z YouTube objeví přímo na naší stránce!

Teď je naše stránka interaktivnější!