Lit-Player-Youtube

LitPlayerYoutube is a YouTube-based video player built with Lit that uses the official YouTube API to control video playback.

Lightweight, customizable, and easy to use, it can be used as a pure Web Component or integrated via React with the official wrapper.

Requirements
Installation
Usage
Importing
Using in Lit
Using in React
Controlling Dimensions
Example
Contributing
Developer
License

Requirements

Node.js >= 14.x
Modern browser with Web Components support

Installation

npm install lit-player-youtube

Usage

To use the component, simply import it and place the tag in your project. No need to instantiate classes or call methods directly.

Importing

LIT:

    import { LitPlayerYoutube } from "lit-player-youtube";

REACT:

    import { LitPlayerYoutubeReact } from "lit-player-youtube";

Using in Lit

Example controlling width and height:

<div style="width: 600px; height: 350px;">
    <lit-youtube-player video="https://www.youtube.com/watch?v=tPBbeszlIXw"></lit-youtube-player>
</div>

Using in React

Example controlling width and height:

import React from "react";
import { LitPlayerYoutubeReact } from "lit-player-youtube";

function App() {
  return (
    <div style={{ width: "600px", height: "350px" }}>
      <LitPlayerYoutubeReact video="https://www.youtube.com/watch?v=tPBbeszlIXw" />
    </div>
  );
}

export default App;

Example

Controlling Dimensions

You can control the player size by wrapping the component inside a container with specific dimensions, as the component adapts to 100% width and height of its container.

The component is also responsive.

Contributing

Contributions are very welcome! To contribute, follow these steps:

Fork this repository.
Create a feature branch (git checkout -b feature/new-feature).
Commit your changes (git commit -m 'Add new feature').
Push to the branch (git push origin feature/new-feature).
Open a Pull Request.