you-tube

you-tube web component

you-tube is a web component built on top of the YouTube Iframe API

API

Properties

• width (string)
• height (string)
• video_id (string)
• autoplay (string) : "1" to auto play & "0" to not
• controls (string) : "1" to show & "0" to hide

Event handler Properties

• onPlayerReady (Function)
• onPlayerStateChange (Function)
• onPlaybackQualityChange (Function)
• onPlaybackRateChange: (Function)
• onApiChange (Function)
• onError: (Function)

Using this component

Usage example

html

 <you-tube  
    height='390' 
    width='640'
    video_id='sZQ1DESaDfg'
    controls="0"
    autoplay="1"></you-tube>

jsx

 <you-tube  
    height='390' 
    width='640'
    video_id='sZQ1DESaDfg'
    onPlayerReady={evt => evt.target.playVideo()}></you-tube>

The player

• The player object can be accessed through evt.target on the event handlers
• A List of operations avilable on the player object can be found here

Script tag

• Put a script tag similar to this <script src='https://unpkg.com/you-tube@0.0.4/dist/youtube.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install you-tube --save
• Put a script tag similar to this <script src='node_modules/you-tube/dist/youtube.js></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc