Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/niklus/you-tube
A web component built on top of the YouTube Iframe API
https://github.com/niklus/you-tube
custom-elements stencil stenciljs web-components youtube youtube-custom-element youtube-iframe-api youtube-web-component
Last synced: 4 days ago
JSON representation
A web component built on top of the YouTube Iframe API
- Host: GitHub
- URL: https://github.com/niklus/you-tube
- Owner: Niklus
- License: mit
- Created: 2017-10-03T22:16:32.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2021-04-11T17:54:08.000Z (over 3 years ago)
- Last Synced: 2024-11-07T03:18:26.038Z (12 days ago)
- Topics: custom-elements, stencil, stenciljs, web-components, youtube, youtube-custom-element, youtube-iframe-api, youtube-web-component
- Language: TypeScript
- Homepage:
- Size: 48.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# you-tube web component
you-tube is a web component built on top of the [YouTube Iframe API](https://developers.google.com/youtube/iframe_api_reference)
## 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
```html
```
#### Add the following script tag in the head of your .html page
```html
```
### 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](https://developers.google.com/youtube/iframe_api_reference#Operations)
### Script tag
- Put a script tag similar to this `` 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 `` 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](https://github.com/Niklus/you-tube-demo) and learn more on how to use the component