pika-player

Native React player component for Pika video hosting. Drop it in your Next.js app instead of the <iframe> embed.

Install

npm install pika-player

Usage

import { PikaPlayer } from "pika-player"

export default function CoursePage() {
  return (
    <div>
      <h1>Lesson 1</h1>
      <PikaPlayer videoId="your-video-id" />
    </div>
  )
}

Colors, theme, and watermark are automatically applied from your Pika dashboard settings. No extra config needed.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | videoId | string | Yes | — | Pika video ID | | className | string | No | — | CSS class on the wrapper div | | style | CSSProperties | No | — | Inline styles on the wrapper div | | onError | (message: string) => void | No | — | Called when the video fails to load |

Requirements

• React 18+