Componente de Vídeo Embed

Este documento detalha os parâmetros configuráveis para o componente de vídeo, organizados por suas funcionalidades.

📋 Índice

• Parâmetros Principais
• Parâmetros de Controle
• Parâmetros de Tempo
• Parâmetros Visuais
• Parâmetros de Comportamento

🎯 Parâmetros Principais

| Parâmetro | Tipo | Padrão | Descrição | |-----------|------|--------|-----------| | autoplay | boolean | true | Controla a reprodução automática do vídeo | | muted | boolean | true | Define se o vídeo inicia sem áudio | | loop | boolean | true | Determina se o vídeo será repetido continuamente | | mobile | boolean | true | Habilita a reprodução em dispositivos móveis | | volume | number | 1 | Define o volume inicial do vídeo (valores entre 0 e 1) |

🎮 Parâmetros de Controle

| Parâmetro | Tipo | Padrão | Descrição | |-----------|------|--------|-----------| | play-button | boolean | false | Exibe o botão de reproduzir/pausar | | mute-button | boolean | false | Exibe o botão de ativar/desativar som | | pause | boolean | false | ⚠️ Depreciado - utilize play-button para controle de pausa |

⏰ Parâmetros de Tempo

| Parâmetro | Tipo | Padrão | Descrição | |-----------|------|--------|-----------| | start-at | number | 0 | Define o tempo de início do vídeo em segundos | | end-at | number | 0 | Define o tempo de fim do vídeo em segundos |

🎨 Parâmetros Visuais

| Parâmetro | Tipo | Padrão | Descrição | |-----------|------|--------|-----------| | resolution | string | "16:9" | Define a proporção de tela do vídeo | | fit-box | boolean | false | Ajusta o vídeo para preencher o contêiner | | inline-styles | boolean | true | Aplica estilos CSS diretamente no elemento | | offset | number | 100 | Offset para ocultar controles depreciados | | poster | string | null | Define a imagem de pré-visualização do vídeo | | load-background | boolean | false | Carrega a miniatura do vídeo como plano de fundo |

⚙️ Parâmetros de Comportamento

| Parâmetro | Tipo | Padrão | Descrição | |-----------|------|--------|-----------| | always-play | boolean | false | Força a reprodução do vídeo, ignorando a visibilidade | | no-cookie | boolean | true | Utiliza a versão do YouTube que não armazena cookies | | force-on-low-battery | boolean | false | Força a reprodução mesmo em modo de baixa bateria | | lazyloading | boolean | false | Habilita o carregamento preguiçoso do iframe | | title | string | "Video background" | Define o título do vídeo para fins de acessibilidade |

💡 Exemplo de Uso

<video-embed 
  autoplay="true" 
  muted="true" 
  loop="true" 
  resolution="16:9"
  play-button="true"
  mute-button="true">
</video-embed>

📝 Notas

weethub-videos

Biblioteca para embutir vídeos como background em elementos HTML.

Instalação

npm install weethub-videos

Uso

Node / Bundlers

import WeethubVideos from 'weethub-videos';
// ou, para CommonJS:
// const WeethubVideos = require('weethub-videos');

new WeethubVideos('[data-vbg]', {
  autoplay: true,
  loop: true,
  muted: true,
});

Vanilla JS (direto no navegador)

Inclua o script via CDN ou arquivo local:

<script src="https://unpkg.com/weethub-videos/src/index.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    new WeethubVideos('[data-vbg]', {
      autoplay: true,
      loop: true,
      muted: true,
    });
  });
</script>

Parâmetros

• autoplay: inicia o vídeo automaticamente (default: true)
• loop: repete o vídeo (default: true)
• muted: inicia o vídeo sem som (default: true)

Exemplo de HTML

<div data-vbg="URL_DO_VIDEO"></div>

Licença

MIT