Socket
Socket
Sign inDemoInstall

you-tube

Package Overview
Dependencies
1
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

you-tube

YouTube Web Component


Version published
Maintainers
1
0

Weekly downloads

Readme

Source

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

Keywords

FAQs

Last updated on 11 Apr 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc