Czym jest kod osadzania?

Kod osadzania to krótki fragment HTML, który właściciel strony wkleja na stronę, aby film z YouTube odtwarzał się bezpośrednio na niej, zamiast byc dostępny jedynie przez link. YouTube generuje go jako element <iframe> wskazujący na specjalny adres /embed/ danego filmu.

Co zawiera kod osadzania

Zawiera co najmniej adres źródłowy z identyfikatorem filmu, szerokość i wysokość (lub responsywny kontener zamiast tego) oraz atrybut title dla dostępności. Opcjonalne parametry kontrolują automatyczne odtwarzanie, czas rozpoczęcia, widoczność sterowania i więcej.

Jak go uzyskać

Można skopiować własną wersję YouTube z panelu udostępniania pod filmem, albo użyć generatora kodu osadzania na tej stronie, aby dodać responsywne rozmiary, tryb prywatności, czas rozpoczęcia i inne opcję, których domyślny panel YouTube nie oferuje razem.

Bliższe spojrzenie na budowę kodu osadzania

Kod osadzania nie jest jednym stałym ciągiem znaków, jest złożony z kilku wymiennych części. Domena (youtube.com lub bardziej prywatny youtube-nocookie.com) określa zachowanie ciasteczek. Ścieżka niesie albo pojedynczy identyfikator filmu, albo w przypadku playlisty ścieżkę videoseries z parametrem list. Parametry zapytania takie jak start, autoplay i controls znajdują się po znaku zapytania i modyfikują odtwarzanie. A otaczający znacznik, czy to stałe atrybuty width/height, czy responsywny kontener div, określa, jak odtwarzacz jest wymiarowany na stronie. Zrozumienie tych rozdzielnych części znacząco ułatwia odczytanie, i ręczna edycję, kodu osadzania wygenerowanego nie przez siebie.

Przykład praktyczny

Załóżmy, ze chcesz pokazać wideo demonstracyjne produktu na stronie docelowej, w wersji prywatnej, zaczynając od 15 sekundy, aby pominąć wstęp, bez automatycznego odtwarzania. Wynikowy kod osadzania łączy domenę youtube-nocookie.com, parametr start=15 i responsywny kontener:

<div style="position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;">
  <iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID?start=15" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" title="Product demo" allowfullscreen loading="lazy"></iframe>
</div>

Każdy element tego fragmentu odpowiada bezpośrednio jakiemuś wyborowi: domena dla prywatności, start=15 dla pominięcia wstępu, a kontener dla responsywnego rozmiaru.

Kod osadzania a zwykły link

Warto jasno określić, czym kod osadzania nie jest. Zwykły link YouTube (adres watch lub youtu.be) służy do udostępniania i klikania; wklejony jako zwykły tekst na stronie, po prostu tam leży jako adres URL, albo zostaje automatycznie zamieniony w osadzenie przez platformy takie jak WordPress obsługujące oEmbed. Kod osadzania natomiast to jawny kod HTML, który kontrolujesz bezpośrednio, dając opcję rozmiaru, prywatności i odtwarzania, których zwykły link nie udostępnia. Powiązane pojęcia, warte poznania obok tego, to element iframe, na którym opiera się kod, oraz różnica między adresem osadzania a adresem oglądania.

Typowe błędy przy ręcznej edycji

Najczęstszy błąd to zapomnienie o zamknięciu znacznika iframe albo pozostawienie starego, twardo zakodowanego rozmiaru width i height obok responsywnego kontenera, co powoduje podwójne skalowanie i zniekształcony odtwarzacz. Innym typowym problemem jest wklejenie adresu oglądania zamiast adresu osadzania, co często kończy się pustym polem zamiast działającego filmu. Sprawdzając kod ręcznie, warto najpierw upewnić się, ze domena to youtube.com lub youtube-nocookie.com, ze ścieżka zaczyna się od /embed/, a dopiero potem przechodzić do parametrów zapytania.

Testowanie kodu przed publikacją

Zanim wklej kod osadzania na docelową stronę, warto przetestować go w prostym pliku HTML lokalnie lub w narzędziu typu CodePen, aby sprawdzić, czy odtwarzacz ładuje się poprawnie i czy responsywny kontener zachowuje się zgodnie z oczekiwaniami przy różnych szerokościach ekranu. Taki krok pozwala wychwycić literówki w adresie czy błędne parametry, zanim trafia one na żywą stronę i zostaną zobaczone przez odwiedzających.

Najczęściej zadawane pytania