Piotr Kalewski — filmy z YouTube, które same trafiają na stronę

Zadanie

Piotr Kalewski publikuje na YouTube rozmowy i nagrania o event marketingu B2B. Podstrona „Oglądam” na stronie w Webflow miała pokazywać te filmy bez przepisywania każdego nowego odcinka do CMS-a.

Zbudowałem integrację z YouTube Data API. Skrypt na stronie pobiera filmy prosto z kanału, a każdy z nich ma podgląd po najechaniu i odtwarzacz w oknie na stronie.

Lista filmów

Skrypt pyta API o wszystkie filmy z kanału, a potem o szczegóły każdego z nich: tytuł, datę, miniaturę, czas trwania i liczbę wyświetleń. Shortsy (do 60 sekund), transmisje na żywo oraz filmy prywatne i usunięte nie trafiają na listę. Pozostałe są ułożone od najchętniej oglądanych.

Nowy film opublikowany na kanale pojawia się na stronie sam, przy następnym wejściu. Miniatura jest zawsze w najwyższej jakości, jaką YouTube udostępnia dla danego filmu.

Podgląd po najechaniu

Po najechaniu na miniaturę film zaczyna grać w niej bez dźwięku. Odtwarzacze ładują się, zanim karta wjedzie na ekran, więc podgląd rusza od razu. Karty daleko od widoku zamykają swoje odtwarzacze, żeby strona nie trzymała wszystkich naraz.

Odtwarzacz na stronie

Kliknięcie otwiera film w oknie na stronie, z dźwiękiem, od sekundy, na której zatrzymał się podgląd. Okno zamyka się klawiszem Esc, krzyżykiem albo kliknięciem obok, a film przestaje wtedy grać.

Bez osobnego serwera

Integracja działa w całości w kodzie strony w Webflow, bez serwera, który trzeba by utrzymywać. Klucz YouTube Data API jest więc widoczny w kodzie. Nie daje on dostępu do konta: pozwala tylko czytać to, co na kanale i tak jest publiczne, a Google przyjmuje go wyłącznie ze strony kalewski.com.

Efekt

Piotr Kalewski publikuje filmy tylko na YouTube, a podstrona „Oglądam” pokazuje je sama, bez udziału developera i bez wpisywania czegokolwiek do Webflow. Wywiady i nagrania, które powstały poza kanałem, mają osobną sekcję w Webflow CMS.