Integrace videí z populárních platform jako YouTube a Vimeo do webových stránek může výrazně obohatit uživatelskou zkušenost. Tento článek vás krok za krokem provede procesem integrace, od získání potřebného kódu po jeho implementaci do HTML struktury vaší Webové stránky.
Získání embed kódu videa
Prvním krokem je získání embed kódu (vloženého kódu) pro video, které chcete integrovat na vaši webovou stránku.
- YouTube: Navštivte stránku s videem na YouTube, klikněte pod videem na tlačítko "Sdílet" a poté na "Vložit". Zobrazí se HTML kód, který můžete zkopírovat.
- Vimeo: Na stránce videa na Vimeo klikněte na tlačítko "Share" (sdílet) a v nově otevřeném okně najděte sekci "Embed" (vložit), odkud si můžete kód také zkopírovat.
Implementace kódu do HTML
Po získání embed kódu jej můžete vložit přímo do HTML kódu vaší stránky. Místo, kde chcete video zobrazit, jednoduše vložte zkopírovaný kód.
<!-- Příklad kódu pro YouTube video -->
<iframe width="560" height="315" src="/" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<!-- Příklad kódu pro Vimeo video -->
<iframe src="https://player.vimeo.com/video/VIDEO_ID" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
Přizpůsobení vzhledu a funkcionality
Obě platformy nabízejí možnosti přizpůsobení vzhledu a chování videí přes parametry URL ve vloženém kódu. Můžete například nastavit automatické přehrání videa, skrýt ovládací prvky nebo změnit poměr stran videa.
- YouTube: Parametry přidáváte přímo do URL videa v
src atributu. Například ?autoplay=1 povolí automatické přehrání.
- Vimeo: Podobně jako u YouTube, přidáváte parametry do URL ve
src atributu. Například &background=1 umožní videu přehrát se na pozadí bez ovládacích prvků.
Responzivní design
Aby bylo video správně zobrazeno na různých zařízeních, je doporučeno použít responzivní obal. Tím zajistíte, že se video správně přizpůsobí velikosti obrazovky.
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
<iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="/VIDEO_URL" frameborder="0" allowfullscreen></iframe>
</div>
Výše uvedený HTML kód vytvoří obalový element, který udržuje poměr stran videa a iframe se správně přizpůsobí jeho velikosti.
Integrace videí z YouTube a Vimeo na vaši webovou stránku může přinést mnoho výhod, jako je zlepšení angažovanosti uživatelů a zvýšení doby, kterou na stránce stráví. Díky jednoduchému procesu získání a vložení embed kódu může být tato funkčnost rychle a efektivně implementována do jakéhokoli webu.
