you-tube

YouTube Web Component

Usage no npm install needed!

<script type="module">
  import youTube from 'https://cdn.skypack.dev/you-tube';
</script>

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)
  • 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

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