Makeable Video

A small video platform connecting media preparation, storage, and the viewing experience.

My Role in this Project

Hosting and publishing workflow
Video library and viewing interfaces
Custom player and embed configuration
Encoding and storage integration

Technologies Used

Next.js, React, TypeScript, Tailwind CSS
Video.js and adaptive HLS playback
FFmpeg encoding
Backblaze B2 media storage
Postgres, Drizzle, and Auth.js

The Impact

Hosts my existing videos
Reusable public watch and embed URLs
Player accents can match the host page
Codex assists encoding and uploads

A closer look.

Explore the screens. Select an image to view it full size.

A public watch page with the custom HLS player in light mode on desktop — A public watch page with the custom HLS player. Desktop · Light mode.

A public watch page with the custom HLS player in dark mode on desktop — A public watch page with the custom HLS player. Desktop · Dark mode.

A public watch page with the custom HLS player in light mode on a phone — A public watch page with the custom HLS player. Phone · Light mode.

A public watch page with the custom HLS player in dark mode on a phone — A public watch page with the custom HLS player. Phone · Dark mode.

Adaptive playback with manual quality selection on desktop in light mode — Adaptive playback with manual quality selection. Desktop · Light mode.

Adaptive playback with manual quality selection on desktop in dark mode — Adaptive playback with manual quality selection. Desktop · Dark mode.

The library using four existing public videos in light mode on desktop — The video library uses existing public titles and thumbnails. Desktop · Light mode. Dates and view counts use local demonstration records.

The library using four existing public videos in dark mode on desktop — The video library uses existing public titles and thumbnails. Desktop · Dark mode. Dates and view counts use local demonstration records.

The library using four existing public videos in light mode on a phone — The video library uses existing public titles and thumbnails. Phone · Light mode. Dates and view counts use local demonstration records.

The library using four existing public videos in dark mode on a phone — The video library uses existing public titles and thumbnails. Phone · Dark mode. Dates and view counts use local demonstration records.

Makeable Video embeddable player with custom accent and playback controls on desktop — The embeddable player with a custom accent. Desktop. Shared player appearance across host themes.

Makeable Video embeddable player with custom accent and playback controls on a landscape phone — The embeddable player with a custom accent. Landscape phone.

The rationale

Keep the player simple. Make the pipeline dependable.

I wanted a place to host my own videos while keeping control over how they appear inside another site. The product stays small: a library for finding and managing videos, a public watch page, and an embed route that presents the player directly.

The player uses Video.js with HLS so playback can adapt to the available connection. Embed options cover controls, muted autoplay, looping, and an accent color. That gives the surrounding page a say in the presentation without needing a different player implementation for every use.

Most of the publishing work happens before the browser sees the video. Codex assists with the command-line upload and encoding process, including FFmpeg preparation and sending the resulting media to B2. The application then serves the metadata and player. That division keeps the library interface focused while still supporting a practical publishing workflow.

The captures use four existing public website-concept videos and their original media. The local library groups them for browsing; dates and view counts were unavailable in this environment and are left blank. The screenshots show the actual app components without changing the live library or recording new views.