Jak osadzać YouTube Shorts na Twojej stronie

Did you know? YouTube Shorts przekroczyły 200 miliardów codziennych wyświetleń w 2025 roku, oglądanych przez ponad 2 miliardy zalogowanych użytkowników miesięcznie. – Neal Mohan, CEO YouTube.

Shorts z YouTube generują imponujące wyniki na platformie, a jeśli już je tworzysz — demonstracje produktu, samouczki, klipy zza kulis — możesz wykorzystać te same treści na całej witrynie. Krótkie 30-sekundowe demo na stronie produktu, Short z reakcją klienta w świadectwach, Short instruktażowy w poście na blogu — wszystkie mogą trafić w miejsce istotne dla decyzji odwiedzającego.

The Widżet Galerii YouTube to jeden ze sposobów: wyświetla strumień zawierający wyłącznie Shorts, który automatycznie aktualizuje się po publikacji i oferuje wbudowane opcje układu i stylu. Możesz także osadzać poszczególne Shorts ręcznie za pomocą iframe albo zbudować własną integrację od podstaw przy użyciu YouTube Data API. Poniżej przedstawiamy przegląd trzech metod, abyś mógł wybrać tę, która najlepiej pasuje do Twojej konfiguracji.

Osadzanie Shorts na Twojej stronie w 4 krokach

Oto najszybsza droga do działającej galerii Shorts na Twojej stronie:

1. Edytor Galerii YouTube i wybierz szablon.
2. Dodaj link do swojej listy odtwarzania Shorts jako źródło treści.
3. Kliknij „Dodaj na stronę”, aby uzyskać kod osadzania.
4. Wklej kod do bloku Własny HTML i opublikuj.

Zbuduj swój widget YouTube Shorts w interaktywnym edytorze poniżej ↓

Najlepsze sposoby osadzania YouTube Shorts

Nie wszystkie metody działają w ten sam sposób, a właściwy wybór zależy od tego, czy potrzebujesz osadzić pojedynczy Short, czy cały strumień, a także od tego, jak dużą masz kontrolę nad projektem.

Widget Elfsight to najłatwiejszy sposób na stworzenie automatycznie aktualizującej się galerii YouTube Shorts bez kodowania. Osadzenia iframe są darmowe i proste dla pojedynczych Shorts, ale wymagają ręcznych aktualizacji przy każdym nowym wideo. YouTube Data API oferuje pełną elastyczność, ale także oznacza utrzymanie całej integracji samodzielnie — łącznie z pobieraniem danych, renderowaniem, paginacją i cache’owaniem.

Pojedyncze Shorts vs. pełny strumień

Prawidłowa konfiguracja osadzania zależy od tego, jak wykorzystujesz Shorts i gdzie na stronie będą miały największy wpływ.

Niektóre firmy skorzystają z obu rozwiązań: pojedyncze Shorts wspierające konkretną stronę oraz sekcja galerii, w której odwiedzający przeglądają wiele Shorts naraz.

Krok po kroku: Konfiguracja widżetu YouTube Shorts

Przeprowadźmy Cię przez metodę Elfsight YouTube Gallery — najelastyczniejszy sposób osadzania automatycznie aktualizującego się strumienia Shorts z kontrolą układu.

Krok 1: Otwórz edytor i wybierz szablon początkowy

Przejdź do edytora i przeglądaj dostępne presety. Każdy szablon ma wcześniej skonfigurowany układ, zestaw kolorów i ustawienie siatki — wybierz ten najbliższy Twoim potrzebom, a następnie dostosuj go.

Krok 2: Dodaj źródło Shorts

Ten krok określa, czy widget wyświetla Shorts, zwykłe filmy, czy oba. W zakładce Źródło ustawisz, skąd widget pobiera treści.

Opcja A — lista odtwarzania Shorts

Jeśli masz już listę odtwarzania YouTube zawierającą wszystkie lub wybrane Shorts, wklej URL listy bezpośrednio w pole Źródło. Widżet wyświetli te Shorts w tej samej kolejności, w jakiej pojawiają się w Twojej playliście YouTube.

Opcja B — Modyfikacja ID kanału

To automatycznie pobiera wszystkie Shorts z Twojego kanału, bez konieczności utrzymywania playlisty.

1. Przejdź do swojego kanału YouTube i kliknij przycisk Udostępnij, aby znaleźć identyfikator kanału (zaczyna się od UC)
2. Zastąp UC na początku swojego identyfikatora UUSH
3. Skonstruuj adres URL listy odtwarzania: https://www.youtube.com/playlist?list=UUSH9LQwHZoucFT94I2h6JOcjw
4. W edytorze widżetu przejdź do Grupy źródeł i wklej ten URL jako źródło listy odtwarzania.

Na przykład, jeśli identyfikator kanału wygląda tak: UCqhnX4jA0A5paNd1v-zEysw, identyfikator przeznaczony wyłącznie na Shorts staje się UUSHqhnX4jA0A5paNd1v-zEysw.

Opcja C — Pojedyncze adresy URL Shortów

Jeśli potrzebujesz tylko kilku konkretnych Shortów — nie całego kanału — dodaj je po jednym jako pojedyncze źródła w Grupach źródeł. Wklej pełny URL każdego Shorta jako osobne źródło. Dzięki temu masz pełną kontrolę nad tym, które Shorty się pojawią.

Krok 3: Skonfiguruj grupy źródeł

Grupy źródeł zapewniają precyzyjną kontrolę nad tym, co pojawia się w widżecie i jak jest zorganizowane. Jeśli dodałeś swoją playlistę Shorts lub link UUSH, zobaczysz ją tutaj. Każda Grupa źródeł ma swoją kartę w widżecie, dzięki czemu odwiedzający mogą przełączać się między grupami, jeśli masz ich więcej.

Kilka rzeczy do ustawienia tutaj:

• Nazwa grupy — Nadaj grupie jasną etykietę (np. “Prezentacje produktu”, “Za kulisami”, “Poradniki”). Pojawia się jako zakładka w widżecie.
• Wiele grup — Możesz tworzyć oddzielne grupy dla różnych playlist Shorts lub mieszać Shorts z regularnymi filmami w różnych kartach. Kanały, playlisty i poszczególne filmy mogą wszystko być w jednym widżecie.
• Pojedyncza grupa? — Jeśli masz tylko jedną grupę źródeł, ukryj karty grup w ustawieniach układu, aby interfejs był schludny.

Pamiętaj, że treść dodana do Grup źródeł nadpisuje URL głównego kanału. Jeśli ustawisz kanał w polu źródła podstawowego, a następnie dodasz Grupy źródeł, wyświetlona będzie wyłącznie zawartość z Grup źródeł.

Krok 4: Wybierz układ

Zakładka Układ kontroluje, jak Twoje Shorts pojawiają się na stronie:

• Nagłówek — baner kanału, logo, nazwa i liczniki, które pojawiają się nad twoimi filmami.
• Kolumny i wiersze — kształt siatki: ile filmów pokazuje się naraz, odstępy i szerokość.
• Wideo — jak wygląda każda miniatura (Klasyczny/Poziomy/Kino) i co się dzieje po kliknięciu.
• Wyskakujące okno — co pojawia się w odtwarzaczu po kliknięciu (tytuł, statystyki, opis, komentarze).
• Ustawienia suwaka — jak odwiedzający przemieszczają się między filmami: strzałki, przeciąganie, paginacja i autoodtwarzanie.

Klasyczny

Standardowa siatka miniatur wideo. Świetnie sprawdza się w dedykowanej sekcji Shorts lub hubie treści. To Ty decydujesz o liczbie kolumn i wierszy, więc siatka 3×2 wyświetla jednocześnie sześć Shorts.

Kino

Duży, wyróżniający się odtwarzacz wideo z paskiem miniaturek poniżej. Świetnie nadaje się do wyróżnienia jednego Shorta, podczas gdy odwiedzający przeglądają inne. Najlepiej działa, gdy masz wyraźnego Shorta‑bohatera na start.

Poziome

Przewijany pasek miniatur. Doskonały do osadzenia Shorts jako sekcji treści pomiędzy innymi sekcjami strony — podobnie jak Shorts na YouTube wyświetlane są w poziomym rzędzie.

Dla galerii Shorts, klasyczna wersja z 3–4 kolumnami na komputerach sprawdza się najlepiej — każda miniatura ma wystarczająco miejsca, by była rozpoznawalna. Na węższych ekranach widget automatycznie dostosowuje liczbę kolumn. Możesz również ustawić osobne konfiguracje kolumn dla desktopu i urządzeń mobilnych w ustawieniach siatki.

Krok 5: Ustaw opcje odtwarzania i wyskakujących okienek

Następnie zdecyduj, co się stanie po kliknięciu Shorta. Dostępne są trzy tryby odtwarzania:

• Odtwarzacz wyskakujący — Otwiera Shorta w oknie lightbox na tej samej stronie. Wyskakujące okno ma 12 elementów z możliwością włącz/wyłącz (tytuł, opis, polubienia, wyświetlenia, komentarze, opcje udostępniania i inne) — pokaż lub ukryj każdy z nich z osobna, aby zachować przejrzystość.
• Nowe okno YouTube — Otwiera Shorts na YouTube w nowej karcie. Przydatne, jeśli chcesz kierować ruch na swój kanał YouTube, ale to przenosi odwiedzających z Twojej strony.
• Podgląd inline — Odtwarza Shorta bezpośrednio w strefie miniatury, bez żadnych nakładek. Zwięzły i dyskretny.

W większości przypadków Shorts popup odtwarzacz oferuje najlepszy balans — utrzymuje odwiedzających na Twojej stronie, dając wideo odpowiednią przestrzeń, by było angażujące. Jeśli osadzasz Shorts jako dowód społeczny (reakcje klientów, referencje), okno popup może także pokazywać liczbę polubień i komentarze jako sygnały zaufania.

Krok 6: Dostosuj projekt

Ustawienia wyglądu pozwalają dopasować widget do wizualnej tożsamości Twojej strony. Nie musisz dotykać wszystkich opcji, ale oto co jest dostępne:

• Schemat kolorów — ogólne ustawienie palety kolorów (Domyślne, Ciemny, Czerwony, Głęboki niebieski, lub Własny), które koloruje cały widżet naraz.
• Menu — kolory grupy/zakładek: stan linku, hover i aktywna karta.
• Wideo — kolory miniatur i ich elementów: tło, nakładka, ikona odtwarzania, tytuł, data, liczniki.
• Wyskakujące okno — kolory odtwarzacza otwieranego po kliknięciu: nakładka, tytuł, informacje o kanale, liczniki, odnośniki.
• Suwak — kolory nawigacji: tło treści i strzałki (domyślne i stany po najechaniu).

Krok 7: Dostosuj nawigację i ustawienia wyświetlania

Zakładka Zaawansowane zawiera kilka ustawień, które łatwo pominąć, ale warto znać — zwłaszcza jeśli Twoja strona ma duży ruch lub zależy Ci na prywatności odwiedzających.

Tryb Prywatności — ładuje filmy przez youtube-nocookie.com zamiast standardowej domeny YouTube, co unika ustawiania cookies śledzących, dopóki odwiedzający nie odtworzy wideo. Wyłącza również przycisk Subskrybuj w nagłówku i oknie. Warto mieć włączone, jeśli Twoja strona musi spełniać wymogi RODO lub podobnych przepisów o prywatności.

Język — Ustaw język interfejsu widżetu z listy rozwijanej 18+ opcji. Dopasuj go do języka dominującego na Twojej stronie, aby etykiety przycisków i teksty interfejsu brzmiały naturalnie.

YouTube API Key — Widżet domyślnie używa współdzielonego klucza API Elfsight, który działa na większości stron. Jeśli Twoja strona ma duży ruch i galeria przestanie aktualizować, możesz tu wprowadzić własny klucz YouTube API, aby uniknąć ograniczeń wspólnego limitu.

AdSense — Jeśli korzystasz z Google AdSense, możesz zintegrować go bezpośrednio z galerią, wprowadzając identyfikator klienta AdSense oraz identyfikatory slotów. Reklamy mogą pojawiać się w strefie treści (siatka wideo) i w odtwarzaczu popup.

Krok 8: Osadź widżet na stronie

Gdy ustawienie będzie gotowe, kliknij w edytorze „Dodaj do witryny”, aby uzyskać kod osadzenia. To krótki fragment HTML — tag skryptu plus div — który wkleisz do zaplecza swojej witryny.

Kod osadzania YouTube Shorts działa na dowolnej platformie obsługującej niestandardowy HTML, w tym WordPress, Shopify, Squarespace, Wix, Webflow oraz zwykłe strony HTML. Kroki konfiguracji mogą się nieznacznie różnić w zależności od platformy — skorzystaj z linków do przewodników CMS-owych.

Szybka kontrola rozwiązywania problemów

• Shorts nie pojawiają się: Jeśli używasz Grup Źródeł, upewnij się, że pole URL głównego kanału jest puste — Grupy Źródeł je nadpisują, a konflikt może uniemożliwić załadowanie treści.
• Pokaż tylko zwykłe filmy (bez Shorts): Zweryfikuj, czy użyłeś prefiksu ID kanału UUSH lub URL-a playlist Shorts, a nie zwykłego URL-a kanału.
• Widżet nie ładuje się w ogóle: Upewnij się, że kod osadzania znajduje się w bloku Niestandardowy HTML (nie w bloku Paragraf ani Tekst). Niektóre wtyczki buforujące mogą także opóźniać pierwsze renderowanie — wyczyść pamięć podręczną serwisu po instalacji.
• Shorts nie aktualizują się: Widżet buforuje treść i odświeża ją co 24 godziny. Nowe Shorts nie pojawią się natychmiast. Jeśli treść wciąż nie jest zaktualizowana po 24 godzinach, sprawdź przewodnik rozwiązywania problemów dotyczących limitów API.

Inne metody osadzania YouTube Shorts na Twojej stronie

Jeśli potrzebujesz tylko osadzić pojedynczy Short — lub chcesz podejścia bez zależności od narzędzi firm trzecich — te metody działają bez żadnych narzędzi zewnętrznych.

Opcja 1: kod osadzania iframe YouTube (dowolna strona)

YouTube nie oferuje dedykowanej opcji osadzania Shorts tak, jak to robi dla zwykłych filmów. Możesz jednak samodzielnie złożyć iframe, modyfikując adres URL Shorts. Ta metoda działa na dowolnej stronie, która obsługuje HTML.

1. Otwórz Shorts, który chcesz osadzić, i skopiuj jego adres URL. Będzie wyglądał jak https://www.youtube.com/shorts/VIDEO_ID
2. Zamień /shorts/ na /embed/ w URL-u. Wynik: https://www.youtube.com/embed/VIDEO_ID
3. Umieść URL w tagu iframe. Dla pionowego Shorta (9:16) użyj szerokości width=”315″ i wysokości height=”560″:
   
   <iframe width="315" height="560" src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube Short" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope" allowfullscreen></iframe>
4. Wklej ten kod iframe do bloku HTML niestandardowego na swojej stronie i opublikuj.

Możesz dodać parametry URL, takie jak &autoplay=1 (start automatyczny, wyciszenie w większości przeglądarek), &loop=1 (powtarzanie) lub &controls=0 (ukrycie przycisków odtwarzania) dla czystszej prezentacji. Dodanie loading=”lazy” do tagu iframe opóźnia ładowanie, aż wideo pojawi się w widoku, co wpływa na szybkość strony.

Skrót do WordPress

Jeśli potrzebujesz osadzić YouTube Shorts w WordPress, zamień /shorts/ na /watch?v= w URL i wklej bezpośrednio do edytora bloków — WordPress automatycznie osadzi go za pomocą oEmbed. Wadą jest to, że odtwarzacz renderuje się w orientacji 16:9 (poziomej), a Ty nie masz możliwości dostosowania wyglądu.

Opcja 2: YouTube Data API (niestandardowa integracja)

Dla zespołów z zasobami deweloperskimi, które potrzebują pełnej kontroli nad tym, jak Shorts są pobierane, filtrowane i wyświetlane, YouTube Data API v3 umożliwia stworzenie niestandardowej integracji od podstaw. To najbardziej elastyczna opcja, a zarazem najtrudniejsza do wdrożenia.

1. Utwórz projekt w Konsoli Google Cloud i włącz YouTube Data API v3.
2. Wygeneruj klucz API (lub skonfiguruj OAuth, jeśli potrzebujesz dostępu do danych prywatnych).
3. Skorzystaj z punktu końcowego playlistItems.list, aby pobierać filmy z listy przesłanych na kanał — lub z playlisty Shorts przeznaczonej dla Shorts, używając prefiksu identyfikatora kanału UUSH opisany wcześniej.
4. Zbuduj front-endowy odtwarzacz i układ, aby wyświetlać pobrane Shorts na Twojej stronie.
5. Zarządzaj pamięcią podręczną, paginacją i limitem zapytań API po swojej stronie.

Profesjonalne wskazówki dla Twojego widgetu YouTube Shorts

Twoje Shorts są osadzone — teraz sprawmy, by działały jeszcze lepiej. Wskazówki te dotyczą zarówno używania widżetu galerii, jak i pojedynczych osadzeń iframe.

1. Umieść Shorts tam, gdzie intencja jest najwyższa. Galeria Shorts na Twojej stronie głównej przyciąga uwagę, ale umiejscowienie na stronie produktu decyduje o decyzjach zakupowych. Umieść Shorts z demonstracją produktu bezpośrednio na odpowiedniej stronie produktu, a nie w ogólnej sekcji wideo, ukrytej za trzema kliknięciami.
2. Skup Grupy źródeł. Jeśli Shorts obejmują różne tematy (poradniki, reakcje klientów, premiery produktów), podziel je na oddzielne Grupy źródeł z czytelnymi nazwami kart. Odwiedzający szybciej znajdą to, czego potrzebują, a Ty unikniesz chaotycznego feedu z wszystkim naraz.
3. Ukryj nagłówek dla osadzeń inline. — Gdy osadzasz widżet Shorts w sekcji, która ma już własny nagłówek i kontekst, nagłówek kanału widżetu staje się zbędny. Wyłącz go, aby uzyskać czystsze dopasowanie — Shorts mówią same za siebie.
4. Użyj układu z 1 kolumną dla pionowego przewijania. Jeśli chcesz poczuć przeglądanie w stylu TikToka — po jednym Shortzie na raz, przewijając w dół — skonfiguruj siatkę na 1 kolumnę. Połącz ją z układem Cinema, aby mieć duży odtwarzacz wyróżniający się obok pasku miniaturek.

FAQ (często zadawane pytania)

Podsumowanie

Teraz masz trzy działające metody osadzania YouTube Shorts na swojej stronie — od szybkiego iframe’a dla pojedynczego wideo po całkowicie konfigurowalny, automatycznie aktualizujący się katalog za pomocą widżetu Elfsight. Właściwy wybór zależy od tego, czy potrzebujesz jednorazowego osadzenia, czy stałego źródła treści, oraz jak duża kontrola nad wyglądem ma znaczenie dla Twojego układu.

Jeśli regularnie publikujesz Shorts i chcesz, aby automatycznie pojawiały się na Twojej stronie, ustaw źródło, wybierz układ, a widżet zajmie się resztą. Aby uzyskać spójny przegląd treści z różnych platform społecznościowych, wypróbuj zamiast tego widżet Strumień mediów społecznościowych.

Autor artykułu

Valeriya Polyakova

Menedżer treści

Jako menedżer treści w Elfsight koncentruję się na tworzeniu materiałów, które są praktyczne i inspirujące. Uwielbiam upraszczać skomplikowane rzeczy i czynić je łatwymi oraz przyjemnymi w czytaniu.

Obserwuj na Facebooku

Obserwuj na X

Obserwuj na LinkedIn

Obserwuj na Reddit