Piotr Kalewski — YouTube videos that reach the site on their own

The brief

Piotr Kalewski publishes conversations and recordings about B2B event marketing on YouTube. The Oglądam (“Watching”) page of the Webflow site was to show these videos without copying every new episode into the CMS.

I built an integration with the YouTube Data API. A script on the page fetches the videos straight from the channel, and each one gets a hover preview and a player in a window on the page.

The list of videos

The script asks the API for every video on the channel, then for the details of each: title, date, thumbnail, duration and view count. Shorts (up to 60 seconds), live streams and private or deleted videos stay off the list. The rest are ordered from the most watched.

A new video published on the channel shows up on the site by itself, on the next visit. The thumbnail is always the highest quality YouTube offers for that video.

A preview on hover

Hovering over a thumbnail starts the video playing inside it, muted. The players load before a card scrolls into view, so the preview starts at once. Cards far from the view close their players, so the page never holds all of them at once.

A player on the page

A click opens the video in a window on the page, with sound, from the second the preview had reached. The window closes with Esc, the close button or a click beside it, and the video stops playing.

No server of its own

The integration runs entirely in the page’s code in Webflow, with no server to maintain. That is why the YouTube Data API key is visible in the code. It gives no access to the account: it only reads what is public on the channel anyway, and Google accepts it from kalewski.com only.

The result

Piotr Kalewski publishes videos on YouTube only, and the Oglądam page shows them by itself, with no developer and nothing entered in Webflow. Interviews and recordings made outside the channel have a section of their own in the Webflow CMS.