you-tube web component
you-tube is a web component built on top of the YouTube Iframe APIAPI
Properties
- width (string) - height (string) - videoid (string) - autoplay (string) : "1" to auto play & "0" to not - controls (string) : "1" to show & "0" to hideEvent 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
