A website with an automatic gallery of YouTube videos

Streamline.sk

Streamline makes TV shows, documentaries, commercials and live broadcasts. Their current work must not be missing from the website, and yet nobody has time to add it there by hand. The gallery fills itself from YouTube.

  • Client: Streamline, s. r. o. (video production)
  • Duration: 2 weeks
PHP YouTube Data API v3 JSON cache Tailwind CSS Vanilla JS
View the live website (opens in a new window)
The Streamline.sk website: the homepage with a gallery of YouTube videos
Streamline.sk: dark mode

Brief

What the client wanted

  • Show current videos and live broadcasts with no manual updating
  • Fast loading without exceeding YouTube limits
  • Easy to use even for an ordinary viewer

Challenge

What the client came with

Since 1996 Streamline, s. r. o. has been producing TV shows, documentaries, commercials and events, and increasingly online broadcasts as well. New videos keep appearing on YouTube and the website was meant to show them without anyone having to add them by hand.

The YouTube Data API (the interface the website uses to read data from YouTube) has a daily request limit. A website that asked it on every visit would use the limit up quickly and slow down.

Solution

What we did and why

A gallery that fills itself. Through YouTube Data API v3 the website loads videos from the channel (title, description, thumbnail, date, length and view count) and shows them as clear cards.

Saving limits. Responses from YouTube are saved to a JSON cache (a temporary copy on the server). The website asks YouTube only once in a while, not on every visit, so it is fast and does not use up the API limit.

Comfortable browsing. Videos can be sorted by newest, most watched and oldest, and more load with a button. They play through youtube-nocookie.com, meaning without YouTube tracking cookies, until the viewer starts the video.

Live and scheduled broadcasts. The overview also shows live and scheduled streams, and their status updates automatically.

Dark mode. The website has a switch between the light and the dark look.

Delivery

What the client got

  • A website with an overview of videos and of live and scheduled broadcasts
  • A connection to YouTube Data API v3 with a JSON cache
  • Sorting by date and views, loading more videos
  • Playback with no tracking cookies until the video starts
  • A responsive interface with a light and a dark mode
  • Automatic updating of broadcast status

Results

What you can verify

0
videos have to be added by hand, the gallery fills itself from YouTube
3
sorting options: newest, most watched, oldest
2 modes
a light and a dark look
2 weeks
from design to launch

Process

How the project ran (2 weeks)

  1. Design

    The video overview from the viewer's side and the flow of data from YouTube.

  2. Development

    The website, a PHP backend, the YouTube Data API connection and the cache.

  3. Launch

    Deployment and speed tuning.

Technologies

What it runs on

YouTube Data API v3
the official YouTube interface the website reads videos from
JSON cache
a temporary copy of the data that keeps the website fast and saves limits
PHP
loading and processing videos on the server
Tailwind CSS
a look with a light and a dark mode

Gallery

Examples

Streamline.sk in light mode (opens the full size image in a new window)
Streamline.sk in light mode
Streamline.sk in dark mode (opens the full size image in a new window)
Streamline.sk in dark mode

I want a similar solution

Tell us about your idea or your problem. The first consultation is free and without obligation. Within 1 business day you get an estimate of the price and the timeline.

+421 950 638 001