jQuery / Plugin / jquery.mb.YTPlayer — Usar um vídeo do YouTube como fundo
jquery.mb.YTPlayer coloca um vídeo do YouTube atrás de uma página inteira ou de um elemento. Carregue jQuery completo, CSS e JavaScript do plugin, e chame .YTPlayer() em uma área com altura. Conteúdo e controles essenciais devem continuar utilizáveis mesmo sem reprodução.
Arquivos e condições de execução
O guia do desenvolvedor exige servidor web e não oferece suporte a file:// ou jQuery slim. Este exemplo fixa jQuery completo 3.7.1 e plugin 3.4.6. A declaração do pacote também indica jQuery 3.x. Migrar para 4 exige verificar o plugin em conjunto, em vez de simplesmente trocar o nome do arquivo.
A ordem é jQuery, plugin e inicialização. Inclua o CSS. Se o tema WordPress já fornece jQuery, gerencie as dependências dos scripts registrados em vez de inserir outra cópia no artigo. O HTML abaixo é um exercício independente.
Exemplo completo para uma área
Salve como ytplayer-demo.html em UTF-8. O identificador vem dos exemplos da API do YouTube. Em produção, escolha vídeo com direitos de uso e permissão de incorporação adequados. Texto e controles ficam fora da região decorativa.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>YouTube background with a static alternative</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.4.6/css/jquery.mb.YTPlayer.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.4.6/jquery.mb.YTPlayer.min.js"></script>
<style>
body { font: 16px/1.6 sans-serif; max-width: 900px; margin: 20px; }
#video { width: 100% !important; height: 340px !important; padding: 0 !important; overflow: hidden; position: relative; background: linear-gradient(120deg,#164e63,#0f766e); }
button { font: inherit; margin: 4px; }
#status { overflow-wrap: anywhere; }
</style>
</head>
<body>
<h1>A background is optional</h1>
<p>This text remains readable without video. Loading connects to YouTube.</p>
<button type="button" id="load">Load YouTube background</button>
<button type="button" id="play" disabled>Play</button>
<button type="button" id="pause" disabled>Pause</button>
<button type="button" id="static">Static background / reload</button>
<p id="status" role="status">Static background; video not requested.</p>
<div id="video" aria-hidden="true"></div>
<p>Keep important content and controls outside this decorative region.</p>
<script>
document.querySelector("#static").addEventListener("click", function () { location.reload(); });
document.querySelector("#load").addEventListener("click", function () {
const status = document.querySelector("#status");
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
status.textContent = "Reduced motion: keeping the static background."; return;
}
if (!window.jQuery || typeof jQuery.fn.YTPlayer !== "function") {
status.textContent = "Dependency unavailable; keeping the static background."; return;
}
this.disabled = true;
status.textContent = "Loading; playback is not yet confirmed.";
const $video = jQuery("#video");
const timer = setTimeout(function () {
status.textContent = "Still waiting; use Static background / reload if needed.";
}, 15000);
$video.on("YTPPlay", function () {
clearTimeout(timer); status.textContent = "Playing muted background.";
jQuery("#pause").prop("disabled", false);
}).on("YTPPause", function () {
status.textContent = "Paused."; jQuery("#pause").prop("disabled", true);
});
$video.YTPlayer({
videoURL: "M7lc1UVf-VE", containment: "self", ratio: "16/9",
autoPlay: true, mute: true, loop: true, showControls: false,
useOnMobile: false, useNoCookie: true, gaTrack: false,
stopMovieOnBlur: true,
onReady: function () {
clearTimeout(timer); status.textContent = "Player ready; use Play if playback does not start.";
jQuery("#play").prop("disabled", false);
},
onError: function (player, error) {
clearTimeout(timer);
status.textContent = "YouTube error " + error.data + "; use Static background / reload.";
}
});
jQuery("#play").on("click", function () { $video.YTPPlay(); });
jQuery("#pause").on("click", function () { $video.YTPPause(); });
});
</script>
</body>
</html>Inicialmente não há solicitação de vídeo ao YouTube. Os arquivos de jQuery e do plugin no CDN são carregados ao abrir a página.
Static background; video not requested.Com Python instalado, abra PowerShell na pasta do arquivo e execute o comando abaixo. Outro servidor HTTP também serve. Se a porta 8000 estiver ocupada, escolha uma livre.
python -m http.server 8000 --bind 127.0.0.1- Abra
http://127.0.0.1:8000/ytplayer-demo.htmlem vez de dar dois cliques no arquivo. - Load YouTube background inicia conexão externa e preparação.
- O evento real de reprodução mostra Playing muted background. e habilita Pause. Estar pronto não comprova reprodução.
- Se estiver pronto e parado, tente Play. Pause pausa; esses controles não corrigem restrições de rede ou incorporação.
- Static background / reload recarrega o documento inteiro, encerra vídeo e solicitações do documento anterior e restaura o início. Os demais estados do exercício também são reiniciados.
- Encerre o servidor com Ctrl+C no terminal.
No Windows Edge com jQuery 3.7.1 foram verificadas a inicialização do plugin real, solicitações externas bloqueadas intencionalmente, dependência indisponível, movimento reduzido e recarga. O sucesso do streaming precisa ser avaliado separadamente; esses testes não garantem reprodução em todos os aparelhos.
Opções e estados observáveis
containment="self" usa o próprio elemento. Uma altura zero não mostra o fundo. A regra do exemplo impõe largura de 100 % e altura de 340px e remove o padding de proporção, com prioridade sobre os estilos em linha do plugin. body usa a página inteira e exige verificar sobreposição de camadas. Comece em uma área limitada. Preencher uma região estreita pode cortar um vídeo 16:9; não deixe informações essenciais apenas nas bordas da imagem.
mute=true pede silêncio, loop=true repetição e autoPlay=true uma tentativa de início após preparação. As regras de reprodução automática, permissões iframe e condições do aparelho afetam o resultado. onReady indica preparação; YTPPlay, reprodução. A mensagem após 15 segundos significa espera, não uma causa de falha identificada.
useOnMobile=false mantém o gradiente quando o plugin identifica um aparelho móvel. Uma janela estreita de computador não substitui teste em telefone real. Ao clicar Load, a preferência de movimento reduzido é consultada e reduce impede a inicialização. Alterações depois do início não são acompanhadas continuamente.
useNoCookie=true escolhe youtube-nocookie.com, sem eliminar todas as conexões externas ou todo processamento de dados. O botão explícito deixa claro quando a conexão começa. Informações e configurações de privacidade devem corresponder à operação real do site.
Falhas e limites da plataforma
Se a área ficar vazia, confira em Network jQuery, plugin, CSS e YouTube, e resolva o primeiro erro de Console. Examine extensões, rede e Content Security Policy. Se o script da API não chegar, onError pode nunca ser executado; a espera e a volta ao fundo estático continuam necessárias.
A referência de erros da IFrame API define 100 como vídeo indisponível, removido ou privado; 101 e 150 como incorporação proibida; 153 como ausência de HTTP Referer ou identificação equivalente do cliente. Confira as solicitações reais do servidor, WebView e navegador em vez de adicionar no-referrer como suposta correção.
showControls configura os controles do plugin e não promete remover todos os anúncios ou marcas do YouTube. Os parâmetros atuais do YouTube documentam opções descontinuadas como modestbranding. quality=highres não garante qualidade máxima. Considere as decisões e elementos reais da plataforma.
Leitura e ações essenciais não devem depender da decoração. Se assistir for necessário para compreender o conteúdo, use um player convencional controlável com legendas e explicações adequadas.
