@joinbox/youtubeplayer

1.3.0 • Public • Published

YouTube Player

  • Replaces DOM element with YouTube player on click.
  • Auto-plays video when it's ready.
  • Reads YouTube video ID and params from element's attributes.
  • Reads loading class name from element attribute and adds it while the player is loading.
  • Loads YouTube API only when needed (on click and pre-load on hover) and only once (looks for window.YT or existing script tag first).

Example

<youtube-player-component
    data-video-id="m7MtIv9a0A4"
    data-loading-class-name="loading"
    data-player-variables='{ "controls": 0, "modestbranding": 1 }'
>
    Preview here
</youtube-player-component>

<!-- Import all components you use -->
<script src="@joinbox/youtubeplayer/YouTubePlayerElement.js"></script>

Components

YouTubePlayer

Exposed Element

<youtube-player-component></youtube-player-component>

Attributes

  • data-video-id: ID of the YouTube video to play.
  • data-loading-class-name: Class that should be added to <youtube-player-component> while the YouTube player (script) is loading.
  • data-player-variables: Player parameters for YouTube.
  • data-use-cookies (boolean): If set, YouTube videos will be loaded from regular youtube.com domain; if not set, the videos will be loaded from the youtube-nocookie.com domain (by setting the host parameter to the corresponding URL when the API is initialized).

Properties

  • Exposes a player property on the custom element that corresponds to the instance of YT.Player for the current video

Readme

Keywords

none

Package Sidebar

Install

npm i @joinbox/youtubeplayer

Weekly Downloads

20

Version

1.3.0

License

ISC

Unpacked Size

29.2 kB

Total Files

12

Last publish

Collaborators

  • fxstr
  • simontschanz
  • andimeier-ch