Vkládání videí z YouTube na Webové stránky je běžnou praxí, ale je důležité, aby se video správně přizpůsobilo různým velikostem obrazovky. K tomu lze použít responzivní iframe, který zajistí, že video bude vždy vypadat dobře bez ohledu na zařízení, na kterém je zobrazeno. Zde je kód pro responzivní iframe pro YouTube:

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
    <iframe src="/
" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;" allowfullscreen></iframe>
</div>

Jak tento kód funguje?

• <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 z YouTube, pokud je to podporováno.

Tento kód vám umožní vložit video z YouTube na vaše webové stránky tak, aby se automaticky přizpůsobilo velikosti obrazovky, což zaručuje dobrou uživatelskou zkušenost bez ohledu na zařízení, na kterém je video zobrazeno.