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

• playerReady (Function)
• playerStateChange (Function)
• playbackQualityChange (Function)
• playbackRateChange: (Function)
• playerApiChange (Function)
• playerError: (Function)

Using this component

Usage example

In your html or jsx

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

Add the following script tag in the head of your .html page

  <script 
    type="module" 
    src="https://unpkg.com/you-tube@0.1.6/dist/you-tube/you-tube.esm.js">
  </script>

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 type="module" src="https://unpkg.com/you-tube@0.1.6/dist/you-tube/you-tube.esm.js"></script> in the head of your .html page as shown above
• Then you can use the element anywhere in your template, JSX, html etc
• Remember to add type="module" on your script tag as shown above

Node Modules

• Run npm install you-tube --save
• Put a script tag similar to this <script type="module" src="node_modules/you-tube/dist/you-tube/you-tube.esm.js"></script> in the head of your .html page
• Then you can use the element anywhere in your template, JSX, html etc
• Remember to add type="module" on your script tag as shown above

Demo

• Look at the DEMO and learn more on how to use the component