← Back to Projects

fun

YouTube Style Video Player

A custom React video player with a YouTube-inspired interface and dynamic ambient box-shadows driven by sampled colours from the video edges.

This project started as a fun challenge: recreating the feel of a YouTube-style player using React and custom UI controls.

The most interesting part of the project was experimenting with dynamic visual styling. Rather than using a static box-shadow, the player calculated average colours from each edge of the video and used that data to render a shadow that responded to the media being shown.

This gave the interface a more reactive and immersive feel, with the player visually adapting to the content rather than simply displaying it inside a fixed frame.

Alongside the styling experiment, the project also explored custom playback controls, responsive layout and component structure in React.

Key Features

  • Custom video player interface inspired by YouTube
  • Dynamic box-shadow rendering based on sampled edge colours
  • React-based component structure
  • Custom playback controls
  • Responsive layout for different screen sizes

Challenges

  • Sampling colour data from video edges in a way that remained performant
  • Turning average colour values into a visual effect that felt natural rather than distracting
  • Balancing custom styling with playback usability
  • Structuring the player as a reusable React component