Iframe

Značka <iframe> (inline frame) je jako malé okno, které můžete 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ž chcete 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 chcete vložit video z YouTube, nemusíte umět moc kódu. Jděte na YouTube, najděte si video, které chcete, klikněte na "Sdílet" a pak na "Vložit". YouTube vám vygeneruje speciální <iframe> kód, který jen zkopírujete a vložíte na svou stránku!

Důležité upozornění: Ne všechny webové stránky dovolují, abyste je vložili do iframu. Některé velké stránky (jako Google.com) to blokují z bezpečnostních důvodů. Takže pokud vá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řte novou sekci <h2> "Videokoutek".

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

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