All examples

Makeable Video

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

A self-hosted video library backed by Backblaze B2, with public watch pages, adaptive HLS playback, and an embeddable custom player. Codex helps operate the upload and encoding pipeline so publishing does not require a large upload dashboard.

View the video player(opens in a new tab)

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

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.

A closer look.

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.