Přejít na obsah

Responzivní YouTube embed

Vložte video z YouTube na web tak, aby sedělo na každé obrazovce.

Poměr stran

Nejdřív načte náhledový obrázek a přehrávač YouTube až po kliknutí – stránky jsou mnohem rychlejší.

Možnosti
px
Styl kódu
Pokročilé

Jen pro velmi staré prohlížeče nebo CMS, které odstraňují styl aspect-ratio.

Náhled
Vložte odkaz na YouTube a uvidíte náhled

Náhled se načítá z YouTube. Pokud náhled hlásí „Video unavailable“, majitel mohl zakázat vkládání.

Kód

    

Běží v prohlížeči – vaše data se nikam neodesílají.

Jak použít

  1. Vložte odkaz na YouTube nebo ID videa do vstupního pole.
  2. Vyberte požadovaný Poměr stran.
  3. Ve volbě Styl kódu vyberte Inline styly nebo CSS třída.
  4. Klikněte na Kopírovat kód a vložte vygenerovaný kód do HTML své stránky.

Příklady

Video v článku od 1:30, s šířkou do 800 px

Vstup
https://youtu.be/dQw4w9WgXcQ?si=XyZ&t=1m30s
Výstup
<style>.yt-embed{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;max-width:800px;margin:0 auto}</style>
<iframe class="yt-embed" src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?start=90&amp;rel=0&amp;playsinline=1" srcdoc="&lt;style&gt;*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}img{height:100%;object-fit:cover}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:#fff;text-shadow:0 0 .5em #000}&lt;/style&gt;&lt;a href='https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?start=90&amp;amp;autoplay=1&amp;amp;rel=0&amp;amp;playsinline=1' aria-label='Play: YouTube video player'&gt;&lt;img src='https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg' alt='YouTube video player' loading='lazy'&gt;&lt;span&gt;▶&lt;/span&gt;&lt;/a&gt;" title="YouTube video player" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Svislé Shorts na webu

Vstup
https://www.youtube.com/shorts/dQw4w9WgXcQ
Výstup
<iframe src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?rel=0&amp;playsinline=1" title="YouTube video player" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="display:block;width:100%;height:auto;aspect-ratio:9/16;border:0;"></iframe>

Časté dotazy

Co dělá režim rozšířeného soukromí?

Režim rozšířeného soukromí (youtube-nocookie.com) vloží přehrávač z domény youtube-nocookie.com místo youtube.com. Při zapnuté volbě Načíst po kliknutí (odlehčené) se navíc z i.ytimg.com načítá jen náhledový obrázek a přehrávač YouTube až po kliknutí.

Jak nastavit automatické přehrávání videa na webu?

Vypněte Načíst po kliknutí (odlehčené) a zapněte Automaticky přehrát po načtení stránky. Nástroj zároveň zapne Ztlumit, protože prohlížeče povolují automatické přehrávání jen bez zvuku.

Můžu na web vložit celý playlist z YouTube?

Vložte odkaz na playlist s parametrem list=. U odkazu pouze na playlist není volba Načíst po kliknutí (odlehčené) dostupná; nástroj vytvoří kód přímo pro přehrávač playlistu.