Generator embed YouTube responsive

Exemple de embed YouTube

Variante gata făcute: copiază codul direct sau deschide exemplul în generator și modifică-l după nevoie.

<iframe
  src="https://www.youtube-nocookie.com/embed/jNQXAC9IVRw"
  title="Me at the zoo – primul videoclip de pe YouTube"
  width="560" height="315"
  style="width:100%;max-width:720px;height:auto;aspect-ratio:16 / 9;border:0;"
  loading="lazy"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  referrerpolicy="strict-origin-when-cross-origin"
  allowfullscreen></iframe>

<iframe
  src="https://www.youtube-nocookie.com/embed/jNQXAC9IVRw"
  title="Videoclip YouTube"
  width="315" height="560"
  style="width:100%;max-width:360px;height:auto;aspect-ratio:9 / 16;border:0;"
  loading="lazy"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  referrerpolicy="strict-origin-when-cross-origin"
  allowfullscreen></iframe>

<iframe
  src="https://www.youtube-nocookie.com/embed/jNQXAC9IVRw?autoplay=1&amp;mute=1&amp;playsinline=1&amp;loop=1&amp;playlist=jNQXAC9IVRw&amp;controls=0"
  title="Me at the zoo – primul videoclip de pe YouTube"
  width="560" height="315"
  style="width:100%;height:auto;aspect-ratio:16 / 9;border:0;"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  referrerpolicy="strict-origin-when-cross-origin"
  allowfullscreen></iframe>

<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;">
  <iframe src="https://www.youtube-nocookie.com/embed/jNQXAC9IVRw"
          title="Videoclip YouTube"
          style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;"
          allowfullscreen></iframe>
</div>

Cum folosești generatorul de embed YouTube

1. Lipește adresa videoclipului. Merg toate formele: youtube.com/watch?v=, youtu.be/, youtube.com/shorts/, youtube.com/embed/ sau doar ID-ul de 11 caractere. Dacă linkul are t=, timpul de pornire e preluat.
2. Scrie un titlu pentru cititoarele de ecran și, dacă vrei, momentul de pornire (de exemplu 1:30).
3. Alege formatul (16:9, 9:16 pentru Shorts sau 4:3), lățimea maximă și opțiunile: mod nocookie, încărcare leneșă, butoane, pornire automată, buclă.
4. Verifică previzualizarea și copiază codul. Generatorul rulează în browser; doar previzualizarea încarcă playerul de la YouTube.

Responsive cu aspect-ratio

Iframe-ul primește width:100%, height:auto și aspect-ratio, așa că se micșorează pe telefon și își păstrează proporția. Toate browserele actuale suportă aspect-ratio. Înainte se folosea un container cu padding-bottom:56.25% și iframe-ul poziționat absolut; nu mai e nevoie de el, decât pentru browsere foarte vechi.

<iframe
  src="https://www.youtube-nocookie.com/embed/ID?start=90"
  title="Titlul videoclipului"
  width="560" height="315"
  style="width:100%;height:auto;aspect-ratio:16 / 9;border:0;"
  loading="lazy"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  referrerpolicy="strict-origin-when-cross-origin"
  allowfullscreen></iframe>

Opțiunile playerului

autoplay=1 merge doar împreună cu mute=1: browserele blochează pornirea automată cu sunet. Pentru buclă, YouTube cere și parametrul playlist cu același ID, altfel loop=1 nu are efect. Modul youtube-nocookie.com nu pune cookie-uri până când omul nu pornește videoclipul. Atributul referrerpolicy este cel din codul oficial YouTube; fără informația despre site, unele videoclipuri pot refuza să ruleze încorporate.

Întrebări frecvente

Videoclipul spune că nu poate fi redat pe alt site. De ce?

Autorul a dezactivat încorporarea sau videoclipul are restricții. Asta nu se poate ocoli din cod; poți pune doar un link spre YouTube.

Încărcarea leneșă ajută la viteză?

Da. Cu loading="lazy", playerul se încarcă abia când pagina ajunge în dreptul lui. Nu o folosi pentru un videoclip din partea de sus a paginii, care trebuie să apară imediat.