Custom Video Player (CYP)

1 Context Menu & Click Interceptor

The player automatically places an invisible click-shield layer over the video and suppresses contextmenu events. Right-clicking or dragging the video will never show YouTube's "Copy video URL" or redirect to external pages.

2 Stream Token Obfuscation (b64:...)

Instead of placing raw YouTube IDs in the HTML, generate protected stream tokens on your backend and send them to the client:

// Node.js Backend API Route:
function createToken(videoId, startSec = 0) {
  const payload = startSec > 0 ? `${videoId}?t=${startSec}` : videoId;
  return 'b64:' + Buffer.from(payload).toString('base64');
}

// Client Application:
player.load('b64:ZFF3NHc5V2dYY1E/dD0w');
// DOM inspector shows only: <div data-stream="b64:...">

3 Smart Ad Passthrough

While external clicks are shielded during normal video playback, the engine monitors player state. If an advertisement appears, pointer events are automatically unlocked directly onto the iframe so users can click "Skip Ad". Once the ad ends, security shielding re-locks instantly.

1 React / Next.js Hook & Component

import React, { useEffect, useRef } from 'react';
import { createPlayer } from '@researcher-tizar/cyp-player';
import '@researcher-tizar/cyp-player/dist/player.css';

export function MyVideo({ videoId }) {
  const containerRef = useRef(null);
  const playerRef = useRef(null);

  useEffect(() => {
    if (!containerRef.current) return;
    const player = createPlayer({
      element: containerRef.current,
      videoId,
      preset: 'glass',
      lazy: true
    });
    playerRef.current = player;
    return () => player.destroy();
  }, [videoId]);

  return <div ref={containerRef} className="aspect-video w-full" />;
}

2 Autonomous Web Component

<!-- Import bundle -->
<script type="module" src="custom-youtube-player/dist/player.es.js"></script>
<link rel="stylesheet" href="custom-youtube-player/dist/player.css">

<!-- Use anywhere in HTML -->
<custom-youtube-player video-id="dQw4w9WgXcQ" preset="cinema" lazy="true">
</custom-youtube-player>

1 Built-In Plugins

import { 
  createPlayer, 
  resumePlugin, 
  chaptersPlugin, 
  keyboardPlugin, 
  gesturesPlugin 
} from '@researcher-tizar/cyp-player';

const player = createPlayer({
  element: '#player',
  videoId: 'dQw4w9WgXcQ',
  plugins: [
    resumePlugin(),       // Remembers position in localStorage
    keyboardPlugin(),     // Space, J, K, L, M, F, T shortcuts
    gesturesPlugin(),     // Mobile double-tap left/right seeking
    chaptersPlugin({      // Chapter markers & drawer
      chapters: [
        { time: 0, title: 'Intro' },
        { time: 45, title: 'Deep Dive' }
      ]
    })
  ]
});

2 Writing a Custom Plugin

const analyticsPlugin = () => ({
  name: 'analytics',
  install(player) {
    player.on('playing', () => console.log('Playback started'));
    player.on('ended', () => console.log('Playback finished'));
  },
  destroy(player) {
    // cleanup
  }
});

player.use(analyticsPlugin());