Osadzanie wideo z YouTube za pomocą <iframe>

Jeśli chcesz wzbogacić swoją stronę internetową o materiał wideo, ale nie masz potrzeby hostowania plików lokalnie, YouTube to doskonała opcja. Udostępnia on gotowy odtwarzacz, który można łatwo osadzić na stronie za pomocą znacznika <iframe>.

Dzięki temu nie musisz martwić się o rozmiar pliku, responsywność ani o to, czy przeglądarka użytkownika obsłuży konkretny format – wszystkim zajmuje się YouTube. A Ty możesz skupić się na estetycznym wkomponowaniu filmu w układ strony.

Jak pobrać kod do osadzenia filmu z YouTube?

Wejdź na stronę z wybranym filmem na YouTube.
Kliknij przycisk „Udostępnij” pod filmem.
Wybierz opcję „Umieść”.
Skopiuj kod HTML zaczynający się od <iframe>.

Kod wygląda mniej więcej tak:

<iframe width="560" height="315" 
  src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
  title="YouTube video player" 
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
  allowfullscreen>
</iframe>

Efekt działania (przykładowy nasz film):

Najważniejsze atrybuty iframe dla YouTube

src – link do osadzonego wideo (w formacie https://www.youtube.com/embed/ID),
width i height – rozmiar odtwarzacza,
allowfullscreen – umożliwia powiększenie filmu na pełny ekran,
allow – lista funkcji, które mogą być użyte (np. autoplay),
title – alternatywny tekst opisujący zawartość iframe (dla dostępności).

Dostosowanie iframe do wyglądu strony

Możesz zmienić szerokość i wysokość iframe, ale lepszym rozwiązaniem jest nadanie mu responsywności, tak aby dopasowywał się do urządzenia użytkownika. Przykład z CSS:

<style>
.responsive-video {
  position: relative;
  padding-bottom: 56.25%; /* proporcja 16:9 */
  height: 0;
  overflow: hidden;
}

.responsive-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

<div class="responsive-video">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
    title="YouTube video player" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen>
  </iframe>
</div>

Efekt działania:

(Odtwarzacz dostosowuje się do szerokości przeglądarki, zachowując proporcje.)

Dodawanie opcji do linku iframe

Do adresu URL w atrybucie src możesz dodawać parametry, które wpływają na zachowanie filmu. Oto kilka przykładów:

?autoplay=1 – film odtwarza się automatycznie (jeśli wyciszony),
?start=60 – start od 60. sekundy,
?rel=0 – po zakończeniu nie pokazuje powiązanych filmów,
?controls=0 – ukrywa kontrolki odtwarzacza.

Przykład z parametrami:

<iframe 
  src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1&rel=0&start=30" 
  allow="autoplay" 
  allowfullscreen>
</iframe>

Uwaga: Niektóre opcje (np. autoplay) mogą być blokowane przez przeglądarki dla komfortu użytkownika.

Ćwiczenie w JSFiddle – stwórz responsywne osadzenie filmu

Wejdź na stronę YouTube, skopiuj kod iframe dowolnego filmu i osadź go w responsywnym kontenerze. Możesz skorzystać z poniższego szablonu:

👉 Otwórz JSFiddle i przetestuj osadzanie wideo z YouTube

<div class="responsive-video">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
    title="Przykładowe wideo" 
    frameborder="0" 
    allow="autoplay; encrypted-media" 
    allowfullscreen></iframe>
</div>

<style>
.responsive-video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.responsive-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

Możesz zmienić film, dodać parametry do URL (np. autoplay, start), sprawdzić zachowanie na różnych szerokościach ekranu.

Previous Zagadnienie

Back to Zagadnienie

Next Temat