@react5/you-player NPM

YouPlayer

YouPlayer is a lightweight React component for embedding and controlling YouTube videos. It wraps the YouTube IFrame Player API, making it straightforward to integrate into your React and Typescript application.

Features

Simple and intuitive React component for YouTube video playback
Access to the underlying IYouTubePlayer for advanced controls (play, pause, next video, etc.)
Callback handlers for player events: onReady, onStateChange, etc.

Installation

Using npm

npm install @react5/you-player

Using yarn

yarn add @react5/you-player

Usage

import { FC, useState } from 'react'
import { YouPlayer, type IYouTubePlayer, type PlayerState } from '@react5/you-player'

const MyComponent: FC = () => {
  const [player, setPlayer] = useState<IYouTubePlayer | null>(null)

  const handleReady = (p: IYouTubePlayer) => {
    console.log('Player ready')
    setPlayer(p)
    p?.playVideo()
  }

  const handleStateChange = (state: PlayerState, player: IYouTubePlayer) => {
    console.log('State change', state)
  }

  return (
    <div>
      <h1>YouPlayer Demo</h1>
      <YouPlayer
        videoId="aKydtOXW8mI"
        onReady={handleReady}
        onStateChange={handleStateChange}
      />
      <div>
        <button onClick={() => player?.pauseVideo()}>Pause</button>
        <button onClick={() => player?.playVideo()}>Play</button>
        <button onClick={() => player?.nextVideo()}>Next</button>
        <button onClick={() => player?.previousVideo()}>Previous</button>
      </div>
    </div>
  )
}

export default MyComponent

Props

Prop	Type	Default	Required	Description
videoId	string	-	yes	The YouTube video ID to load.
onReady	(player: IYouTubePlayer) => void	undefined	no	Called when the player is initialized and ready. Receives the IYouTubePlayer instance.
onStateChange	(state: PlayerState, player: IYouTubePlayer) => void	undefined	no	Called when the player’s state changes. Receives new state and the player instance.
height	string \| number	360	no	The player iframe height (can be px or %).
width	string \| number	640	no	The player iframe width (can be px or %).

Example

Below is a minimal example that loads a YouTube video and starts playback when the player is ready:

import React, { FC } from 'react'
import { YouPlayer } from '@react5/you-player'

const SimpleUsage: FC = () => {
  return (
    <YouPlayer
      videoId="aKydtOXW8mI"
      onReady={(player) => {
        console.log('Player is ready!')
        player.playVideo()
      }}
    />
  )
}

export default SimpleUsage