All work
Frontend

Bankole

A cinematographer's reel, assembled from two video sources that were never meant to sit next to each other.

1 month
Build time
Solo
Frontend Developer
Bankole, Cinematographer & Music Video Producer

The problem

A cinematographer is hired on the strength of about fifteen seconds of footage. Everything else on a portfolio site, the bio, the client list, the contact form, is downstream of whether the first clip made someone want to keep watching.

Which makes the reel the entire site, and makes every decision about it a decision about whether the work gets seen at all.

The constraint

The work lives in two places and only one of them is yours

Music videos are published on YouTube, because that is where the views, the credits and the client's own audience already are. Pulling those down and self-hosting them would mean asking the work to exist twice and splitting its numbers.

Everything else, spec work, unreleased footage, cuts that were never a YouTube release, has no home except the site itself.

So the reel is half embed and half owned file, and those two halves behave nothing alike. A Cloudinary asset is a file you control down to the codec. A YouTube embed is an iframe with its own branding, its own controls, its own overlays, and a payload measured in hundreds of kilobytes before anyone has pressed play. Put a grid of them on one page and the page is mostly YouTube.

What I built

  1. 01

    Two sources, one grid

    The viewer is never told where a clip is coming from, and should not be able to guess. Same tile proportions, same poster treatment, same behaviour on tap, whether the file is being served by Cloudinary or the frame belongs to YouTube.

    The alternative, a self-hosted section and an embeds section, organises the page around the hosting bill instead of around the work.

  2. 02

    Cloudinary owns the footage the site owns

    Anything self-hosted goes through Cloudinary, which negotiates format and resolution per request rather than sending one master file to every device.

    Video is the heaviest thing on any page it appears on. Handing the encoding to a service that does it at the edge is the difference between a reel that plays and a reel that buffers.

  3. 03

    Published work stays published

    Music videos are embedded from YouTube rather than re-uploaded. The view count, the comments and the credits stay attached to the release the client actually promoted, and the site borrows that rather than competing with it.

  4. 04

    Designed at the narrow end

    The layout is built for a phone first and allowed to expand, because a reel is something people watch on the device that is already in their hand when someone sends them a link.

    Designing down from desktop means deciding what to drop under pressure at the very end. Designing up means those decisions get made deliberately, at the start.

Open channel

Got something
like this to build?

Happy to talk through how any of this was put together, or what it would take to do something similar.