Skip to content

micnews/deku-youtube-video

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

64 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

deku-youtube-video

Youtube video component for deku.

Usage

npm install deku-youtube-video
import YoutubeVideo from 'deku-youtube-video';

const onClick = (e, component, setState) => {
  console.log('video clicked');
  // Set state.opened to true to play the video
  setState({ opened: true });
}

export default {
  render: function ({ state }) {
    const {opened} = state;

    return (<YoutubeVideo youtube-id='YoB8t0B4jx4' onClick={onClick} opened={opened} />);
  }
}

Attributes

  • youtubeId=[youtube-video-id] Set youtube video ID to use.
  • onClick=[function] Function to run when video is clicked on
  • opened=[boolean] If false, shows a video preview using the youtube thumbnail and if true opens and plays the video.
  • thumbnail=[string] - Optional Set custom thumbnail image, this will override the standard youtube thumbnail.
  • thumbnailSize=[string] - Optional Set which youtube thumbnail to use, defaults to hqdefault

events

If you load the youtube iframe api (https://www.youtube.com/iframe_api), support for the following events exists (as attributes):

  • onEnded - called on window.YT.PlayState.ENDED
  • onPlaying - called on window.YT.PlayState.PLAYING
  • onPaused - called on window.YT.PlayState.PAUSED
  • onBuffering - called on window.YT.PlayerState.BUFFERING
  • onCued - called on window.YT.PlayerState.CUED

index.css

Import the css using postcss.

@import 'deku-youtube-video';