The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Who wants to come to a picnic with an outdoor movie? I'll bring the video player 🧺🎬
Picnic Cinema is my new Video.js skin: a 3D garden cinema where the controls hang as tags from festoon bulbs. The lights glow when you pause and dim when the film starts.
Too comfy to reach the bulbs? Grab the remote on the picnic table.
You can still use the keyboard like a normal player: Space to play, arrows to seek and change the volume, F for fullscreen.
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
GlowFlow - Premium http://Video.js Skin. I designed a modern player with both Dark Mode and Light Mode. It has a glowing play button, clean progress bar, and easy controls for volume, captions, quality, and fullscreen. It is responsive, accessible, and easy to use on phone and computer.
Press Proof — a Video.js v10 skin that prints its controls
Press Proof treats the player as a sheet on a proofing table. Most skins float translucent controls over the picture and hope the footage cooperates; this one prints them, in solid ink on an off-white paper strip, so they read the same over a night sky or a snowfield (ink on paper is about 16:1).
Every mark comes from the print shop and has a job. The timeline is a printer's colour bar with ruler ticks and a hatched buffer, the scrubber is a registration target, fullscreen is a pair of crop marks, volume is a ten-step densitometer scale, and the big play button is a registration target whose cyan and magenta plates sit slightly off register. The one piece of motion with a personality is misregistration: hover a control and its plates slip and snap back into register. With reduced motion on, nothing travels.
It stays usable for everyone: all controls in visual order on the keyboard with a single magenta-on-paper focus mark, menus that close with Escape and return focus, touch targets of 40 px or more, a full-bleed strip on phones, RTL support, and a clean fallback to system colours in Windows High Contrast. Icons were drawn for the skin; type is IBM Plex Mono. The demo page switches between bright footage (our Mux asset) and dark footage so legibility can be judged over both, and links to the skin workbench for sizes, ratios, languages and RTL.
Built with an AI coding assistant (Claude Code) from the Video.js CLI Scaffold starting point, under human art direction and review.
Footage: Big Buck Bunny (excerpt), © Blender Foundation, CC BY 3.0, hosted on Mux; NASA Cosmic Dawn trailer (Video.js demo asset). Typeface: IBM Plex Mono (OFL). Skin licensed under Apache-2.0. Design and build: Rui Codex, Belgium.
Darkroom, a Video.js v10 skin that develops your video like 35 mm film.
Darkroom turns the Video.js v10 player into a roll of 35 mm film. The scrubber is the strip itself: four perforations to a frame, chapters spliced on frame lines, and every frame you have watched develops into an orange negative printed from the video's own storyboard. Hover a frame and it flips to a positive, with a contact print above it naming the frame and time. The readout is a darkroom timer instead of a timestamp: a camera counter that starts at S, ticks through 36 exposures and ends at 36 END, where a Roll complete card rewinds the strip in steps.
Safelight red is kept for focus rings, the exposure lamp and active states. Everything else is paper on a grain textured panel that holds 11:1 contrast over white footage, so the controls stay readable over any video. The icons are a custom family drawn for the concept: a viewfinder for fullscreen, an aperture for settings, a rewind crank for restart.
It is fully keyboard operable with visible focus everywhere, 44 px touch targets, reduced motion support, forced colors support, and a responsive layout tested from 240 px to fullscreen in Chrome, Safari and Firefox. The showcase page lets you switch between dark and bright footage and between 16:9 and 9:16.
That film-strip scrubber is clever.