Video player

Build with Vlak
Screening roomThree films, one placeWatch on YouTube
Foals

Spanish Sahara

Official music video
Captions and quality in the video controls
Connecting to YouTube…02 / 03

Choose a music video → watch → move through the playlist

View source
About this download

A standalone Vite and React project using Vlak 0.5.0. Extract the ZIP, open its folder, then run npm install and npm run dev. Requires Node 22.12 or newer.

Sample videos use official YouTube and Vimeo embeds. Video files are not included in the ZIP. Keep provider links and replace the playlist with media you are permitted to embed.

Playback, player scripts and thumbnails require YouTube or Vimeo access. Publisher restrictions, region and browser settings can prevent playback; direct publisher links remain available.

Installation and base examples

Inside the interface

A quiet space for watching, with the playlist close at hand and room for the picture. Playback controls stay within reach as you move between films.

Official videos stream through YouTube and Vimeo embedded players. Availability, captions and playback options depend on the publisher, region and browser. Each video includes a direct publisher link if embedded playback is unavailable.

Watch the 20-second walkthrough

A short walkthrough of the working video player study.

Components used

Use this as a starting point

Build with Vlak

Install the components, add the stylesheet, and bring your own content. The study’s source shows how the pieces fit together.

React componentsCSS includedMIT licensed

Download the Video player starter

Install the package
npm install @noorddev/vlak-react
import "@noorddev/vlak-react/css";
Installation guide View study source

Start with your coding agent

A ready-to-use brief with this study, Vlak’s components, and the design guide.

Component modifications

  • Playback controls, Media scrubber and Slider operate the official YouTube and Vimeo player APIs. Position, duration, volume and buffered ranges follow the real player.
  • The playlist keeps the selected film, artist and official publisher together. Previous and next actions move between the three videos without introducing a separate library workflow.
  • Native select exposes the current video’s available playback speeds. The embedded players retain native captions, quality and full-screen controls; direct links remain available if embedding is restricted.
  • On mobile, Watching and Playlist become separate full-width screens. The video keeps its natural aspect ratio, transport stays reachable, and volume receives its own row. Opening Playlist pauses the picture and preserves the selected video and position.