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.
