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

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.

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
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.