LIT PLAYER YOUTUBE

#webdev #programming #typescript #react

Lit-Player-Youtube

LitPlayerYoutube é um player de vídeo baseado no YouTube, criado com Lit, que utiliza a API oficial do YouTube para controlar a reprodução.

Leve, customizável e fácil de usar, pode ser usado como um Web Component puro ou integrado via React.

Requisitos

Node.js >= 14.x
Navegador moderno com suporte a Web Components

Instalação

npm install lit-player-youtube

Uso

Para usar o componente, importe-o e coloque a tag no seu projeto. Não é necessário instanciar classes ou chamar métodos diretamente.

Importação

LIT

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

REACT

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

Usando com Lit

Exemplo controlando largura e altura:

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

Usando com React

Exemplo controlando largura e altura:

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;

Controlando Dimensões

Você pode controlar o tamanho do player envolvendo o componente em um container com dimensões específicas. O componente se adapta para usar 100% da largura e altura do container.

O componente também é responsivo.