Lit-Player-Youtube

The LitPlayerYoutube is a video player based on YouTube built with Lit, which uses the official YouTube API to control the video. It is lightweight, customizable, and easy to use both as a pure Web Component and via React with the official wrapper.

How to Use the Component?

To use the component, you need to install it via npm.

npm install lit-player-youtube

How to Import?

LIT:

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

REACT:

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

Or in this way:

import "lit-player-youtube"

It was designed for rendering video easily, without needing to instantiate a class or call a method, just by importing the component and placing its tag.

Using the component in Lit

<lit-youtube-player video="https://www.youtube.com/watch?v=tPBbeszlIXw"></lit-youtube-player>

Using the component in React

<LitPlayerYoutubeReact video="https://www.youtube.com/watch?v=tPBbeszlIXw" />

Control Dimensions

To control its width and height, just place it inside a div or similar element and set the dimensions; the component is set to 100% width and height by default.

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

Result: