you-tube

YouTube Web Component

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
you-tube
000.1.62 years ago5 years agoMinified + gzip package size for you-tube in KB

Readme

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

API

Properties

- width (string) - height (string) - videoid (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

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