Youtube Video Player

YouTube video player with custom controls

Installation

pnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/youtube-video-player"

Dependencies

pnpm add motion

Examples

Custom Styling

"use client"

import { YouTubePlayer } from "@/components/vritti/youtube-video-player"

export function YouTubeVideoPlayerCustomStyling() {
  return (
    <div className="p-8">
      <div className="max-w-2xl mx-auto">
        <YouTubePlayer
          videoId="9bZkp7q19f0"
          title="PSY - GANGNAM STYLE"
          containerClassName="border-2 border-primary rounded-2xl shadow-2xl"
          thumbnailImageClassName="opacity-90 saturate-150"
          playButtonClassName="bg-primary/20 border-border/20 hover:bg-primary/30"
          playIconClassName="text-secondary fill-secondary"
          titleClassName="text-secondary font-bold"
          controlsClassName="right-4 top-4"
          expandButtonClassName="bg-secondary/20 hover:bg-secondary/30 border-secondary text-secondary"
        />
      </div>
    </div>
  )
}

Multiple

"use client"

import { YouTubePlayer } from "@/components/vritti/youtube-video-player"

export function YouTubeVideoPlayerMultiple() {
  return (
    <div className="p-8">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <YouTubePlayer
          videoId="dQw4w9WgXcQ"
          title="Rick Astley - Never Gonna Give You Up"
          className="w-full"
        />
        <YouTubePlayer
          videoId="9bZkp7q19f0"
          title="PSY - GANGNAM STYLE"
          className="w-full"
        />
        <YouTubePlayer
          videoId="kJQP7kiw5Fk"
          title="Luis Fonsi - Despacito"
          className="w-full"
        />
      </div>
    </div>
  )
}