ApnaYT - Custom YouTube Player

A lightweight, feature-rich React component for embedding YouTube videos with complete control. Includes built-in thumbnail overlay, interactive seek controls, and comprehensive video metadata support.

Installation

npm install apnaytplayer

or

yarn add apnaytplayer

Quick Start

import React, { useRef } from 'react';
import { ApnaYT, ApnaYTRef, ApnaYTConfig } from 'apnaytplayer';
import 'apnaytplayer/ApnaYT.css';

function MyPlayer() {
  const playerRef = useRef<ApnaYTRef>(null);

  const config: ApnaYTConfig = {
    videoId: 'dQw4w9WgXcQ',
    autoplay: false,
    muted: false,
    controls: 0,
    width: '100%',
    height: '500px',
  };

  return (
    <>
      <ApnaYT
        ref={playerRef}
        config={config}
        onReady={() => console.log('Ready!')}
        onPlay={() => console.log('Playing')}
        onPause={() => console.log('Paused')}
        onTimeUpdate={(current, duration) => {
          console.log(`Time: ${current}/${duration}`);
        }}
      />

      <button onClick={() => playerRef.current?.play()}>Play</button>
      <button onClick={() => playerRef.current?.pause()}>Pause</button>
    </>
  );
}

Features

✨ Thumbnail Overlay - Shows video thumbnail when paused/stopped
🎮 Interactive Controls - Click to play/pause, double-click to seek ±10s
📊 Video Metadata - Get video info, channel details, views, and likes
🎨 Customizable - Full control over styling and behavior
🔧 Full API Access - All YouTube IFrame API methods via ref
📡 Complete Events - onPlay, onPause, onTimeUpdate, onVolumeChange, etc.

Config Options

interface ApnaYTConfig {
  videoId: string;
  autoplay?: boolean;
  muted?: boolean;
  loop?: boolean;
  controls?: 0 | 1;
  rel?: 0 | 1;
  modestbranding?: 0 | 1;
  iv_load_policy?: 1 | 3;
  fs?: 0 | 1;
  cc_load_policy?: 0 | 1;
  playsinline?: 0 | 1;
  disablekb?: 0 | 1;
  width?: string | number;
  height?: string | number;
}

Methods (via ref)

// Playback Control
playerRef.current?.play();
playerRef.current?.pause();
playerRef.current?.stop();
playerRef.current?.seekTo(30, true);

// Time Information
playerRef.current?.getCurrentTime();
playerRef.current?.getDuration();

// Volume Control
playerRef.current?.setVolume(75);
playerRef.current?.getVolume();
playerRef.current?.mute();
playerRef.current?.unMute();
playerRef.current?.isMuted();

// Playback Rate
playerRef.current?.setPlaybackRate(1.5);
playerRef.current?.getPlaybackRate();

// Player State
playerRef.current?.getPlayerState();

// Quality Control
playerRef.current?.getAvailableQualityLevels();
playerRef.current?.setPlaybackQuality('hd720');
playerRef.current?.getPlaybackQuality();

// Video Information
playerRef.current?.getInfo();
// Returns: Promise<{
//   videoId: string;
//   title: string;
//   url: string;
//   embedCode: string;
//   thumbnail: {
//     default: string;
//     mqdefault: string;
//     hqdefault: string;
//     sddefault: string;
//     maxresdefault: string;
//   };
//   channel?: {
//     channelId: string;
//     channelName: string;
//     channelUrl: string;
//     channelLogo?: string;
//     subscriberCount?: string;
//   };
//   stats?: {
//     viewCount?: string;
//     likeCount?: string;
//   };
// } | null>

// Cleanup
playerRef.current?.destroy();

Events

<ApnaYT
  ref={playerRef}
  config={config}
  className=""
  style={{}}
  onReady={() => {}}
  onPlay={() => {}}
  onPause={() => {}}
  onEnd={() => {}}
  onStateChange={(state) => {}}
  onTimeUpdate={(currentTime, duration) => {}}
  onVolumeChange={(volume) => {}}
  onError={(errorCode) => {}}
  onPlaybackQualityChange={(quality) => {}}
/>

Interactive Controls

The player includes built-in interactive controls:

• Single Click: Toggle play/pause (anywhere on player)
• Double Click Left: Seek backward 10 seconds
• Double Click Right: Seek forward 10 seconds
• Thumbnail Overlay: Automatically shows when video is paused/stopped

Video Information

The getInfo() method returns comprehensive video and channel information:

const info = await playerRef.current?.getInfo();

if (info) {
  console.log(info.title);
  console.log(info.thumbnail.maxresdefault);
  
  if (info.channel) {
    console.log(info.channel.channelName);
    console.log(info.channel.subscriberCount);
  }
  
  if (info.stats) {
    console.log(info.stats.viewCount);
    console.log(info.stats.likeCount);
  }
}

Example with Custom Controls

import React, { useRef, useState } from 'react';
import { ApnaYT, ApnaYTRef, ApnaYTConfig } from 'apnaytplayer';
import 'apnaytplayer/ApnaYT.css';

function CustomPlayer() {
  const playerRef = useRef<ApnaYTRef>(null);
  const [currentTime, setCurrentTime] = useState(0);
  const [duration, setDuration] = useState(0);
  const [volume, setVolume] = useState(100);
  const [isPlaying, setIsPlaying] = useState(false);
  const [videoInfo, setVideoInfo] = useState(null);

  const config: ApnaYTConfig = {
    videoId: 'dQw4w9WgXcQ',
    controls: 0,
    width: '100%',
    height: '500px',
  };

  return (
    <>
      <ApnaYT
        ref={playerRef}
        config={config}
        onReady={async () => {
          const vol = playerRef.current?.getVolume() || 100;
          setVolume(vol);
          
          const info = await playerRef.current?.getInfo();
          setVideoInfo(info);
        }}
        onPlay={() => setIsPlaying(true)}
        onPause={() => setIsPlaying(false)}
        onTimeUpdate={(current, total) => {
          setCurrentTime(current);
          setDuration(total);
        }}
        onVolumeChange={(vol) => setVolume(vol)}
      />

      <div>
        <button onClick={() => playerRef.current?.play()}>Play</button>
        <button onClick={() => playerRef.current?.pause()}>Pause</button>
        <div>
          {Math.floor(currentTime)}s / {Math.floor(duration)}s
        </div>
        <input
          type="range"
          min="0"
          max={duration || 100}
          value={currentTime}
          onChange={(e) => playerRef.current?.seekTo(parseFloat(e.target.value))}
        />
        <input
          type="range"
          min="0"
          max="100"
          value={volume}
          onChange={(e) => playerRef.current?.setVolume(parseInt(e.target.value))}
        />
      </div>

      {videoInfo && (
        <div>
          <h3>{videoInfo.title}</h3>
          {videoInfo.channel && (
            <p>Channel: {videoInfo.channel.channelName}</p>
          )}
          {videoInfo.stats && (
            <p>
              Views: {videoInfo.stats.viewCount} | 
              Likes: {videoInfo.stats.likeCount}
            </p>
          )}
        </div>
      )}
    </>
  );
}

Getting Video ID

To get the video ID from a YouTube URL:

• URL: https://www.youtube.com/watch?v=dQw4w9WgXcQ
• Video ID: dQw4w9WgXcQ

License

MIT