A fully-featured video player component with playback controls, volume adjustment, and fullscreen support

Basic Usage

With Poster Image

• Play/Pause controls
• Seek bar with current time and duration
• Volume control with mute toggle
• Fullscreen mode
• Keyboard shortcuts support
• Responsive design

• Base styling with Tailwind:
  Core Structure

  .video-container {
    @apply relative w-full max-w-xl border-2 border-primary-light-500 
          rounded-lg shadow-lg overflow-hidden;
  }
  
  .controls {
    @apply absolute -bottom-1 -left-1 w-[calc(100%+.5rem)] bg-white 
          border-2 border-primary-light-500 rounded-b-lg text-primary-light-500 
          p-2 flex items-center gap-3;
  }
  

• Interactive elements:
  Interactive Styles

  button {
    @apply transition-transform transform hover:scale-110;
  }
  
  input[type="range"] {
    @apply cursor-pointer accent-primary-light-500;
  }