React Components and utilities to Embbed or Create Interactive Components play with Youtube Player

Popcorn Component

Popcorn Component get information from player and transfer it to other child. If you want to write another component. Just put it in Popcorn it will receive following props

  duration
  loadedSeconds
  playedSeconds
  played // playing or not
  player // with seekTo method

So you are free to write interactive component.

Examples

You can look example in App.js that demo how ReactPopcorn's components works.

Run

Yarn start

Import

import Popcorn, { Player, Subtitle, getYoutubeCaption } from './popcorn/src';

Render method

<Popcorn videoId={videoId} ref={node => this.player = node && node.player}>
  <div onMouseOver={this.handleMouseOver} onMouseLeave={this.handleMouseLeave}>
    <Player 
      controls
      youtubeConfig={youtubeConfig}
    />
  </div>
  <div style={{ position: 'absolute', top: 10, width: '100%' }}>
    <Subtitle 
      data={getYoutubeCaption(videoId, { langCode: 'ko', name: '' })} 
    />
  </div>
  <div style={{ position: 'absolute', bottom: hovering ? 50 : 10, width: '100%', transition: 'bottom 0.3s' }}>
    <Subtitle 
      data={getYoutubeCaption(videoId, { langCode: 'en', name: 'CC' })} 
    />
  </div>
</Popcorn>

Build

webpack

This project was bootstrapped with Create React App.