Open-source video player

The video player
you design in a minute.

Playloom gives any HTML <video> the controls people already know: chapters, speed, captions, previews on hover, theater mode and keyboard shortcuts. Theme it right here, download one script, and add it to your site. Open source, no dependencies.

0:00 / 0:52· Snowfields ›
Studio

Compose it here. Download one script.

Pick a preset or set your own colours, shape and controls. The player below is the real thing: what you see is exactly what you download.

0:00 / 0:52· Snowfields ›

Sintel trailer © Blender Foundation, CC BY 3.0. Click the player and try Space, J, L, M, C and F.

index.html
<video id="hero-video" src="/your-video.mp4">
  <track kind="captions" src="/captions.vtt" srclang="en">
</video>
<script src="/playloom.js"></script>
9 kB gzipped · MIT · works with any <video> that has id “hero-video”
How it works

From a plain video tag to a real player.

No build step, no framework, no account. Your theme is baked into the script, and it enhances every video with the id you choose.

  1. Compose

    Pick a preset or set your own colours, shape and features.

  2. Download

    Get one script with your theme built in.

  3. Drop it in

    Add the script and give your <video> the id. Done.

Features

All the details viewers expect.

Chapters and previews

Chapter markers on the timeline and the time under your cursor, so people find the moment they want.

Speed, captions, PiP

Playback speed, WebVTT captions, picture-in-picture, theater mode and fullscreen, all built in.

Keyboard first

Space, K, J, L, M, F, C and the arrow keys work exactly as people expect. Fully accessible with a screen reader.

Your own elements

Add custom buttons, end screens and overlays, like “Buy the course” or “Next episode”.

9 kBgzipped. No dependencies, no framework required.
1 scriptWorks with any <video> tag that has your id.
MITOpen source. Use it anywhere, change anything.
Principles

Small, open and accessible.

  • MIT licensed

    Use it in any project, commercial or not.

  • 9 kB, no dependencies

    Loads fast and works with any framework, or none.

  • Accessible

    Keyboard, screen reader and reduced-motion support built in.

  • No tracking

    Playloom never phones home. Your viewers stay yours.

Why we built it

Every project I worked on needed a video player, and every time it was the browser's default controls or a heavy embed full of someone else's branding.

Playloom is the player I wanted: the controls everyone already knows, styled to fit the site, in one small script.

Nick van der WildtFounder, Made for Interaction
FAQ

Developer questions.

How do I add it to my site?

Download the script from the studio, add it to your page, and give your <video> tag the id you chose. Every matching video is upgraded when the page loads.

Does it work with React, Vue or a CMS?

Yes. It works on plain HTML, so it works anywhere a <video> tag ends up, including WordPress, Webflow and any framework.

Can I use HLS or YouTube videos?

Playloom works with any source the <video> tag can play. HLS streams work in Safari natively and elsewhere with hls.js. It doesn't wrap YouTube embeds.

How do captions work?

Add a standard WebVTT <track> to your video. Playloom adds the CC button and styles the captions.

Is it really free?

Yes. Playloom is MIT licensed. A paid hosted version with analytics is planned, but the player itself stays free.

Make your videos feel native.

Open the studio

Free and open source. No account needed.