jQuery / Plugin / jquery.mb.YTPlayer — Usar un vídeo de YouTube como fondo
jquery.mb.YTPlayer coloca un vídeo de YouTube detrás de una página o un elemento. Cargue jQuery completo, el CSS y el JavaScript del plugin, y llame a .YTPlayer() en una zona con altura. El contenido y los controles esenciales deben seguir funcionando aunque el vídeo no se reproduzca.
Archivos y condiciones
La guía del desarrollador exige un servidor web y no admite file:// ni jQuery slim. Este ejemplo fija jQuery completo 3.7.1 y el plugin 3.4.6. La declaración del paquete también señala una dependencia jQuery 3.x. Cambiar a 4 requiere comprobar la compatibilidad del plugin, no solo editar el nombre del archivo.
El orden es jQuery, plugin e inicialización. Incluya la hoja CSS. Si un tema WordPress ya proporciona jQuery, gestione las dependencias de los scripts registrados en vez de insertar otra copia en el artículo. Este HTML es una práctica independiente.
Ejemplo completo para un elemento
Guarde ytplayer-demo.html en UTF-8. El identificador procede de los ejemplos de la API de YouTube. Para producción, elija un vídeo con permisos de uso e inserción adecuados. El texto y los controles están fuera de la zona 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>Al principio no se solicita vídeo a YouTube. Los archivos CDN de jQuery y del plugin sí se cargan al abrir la página.
Static background; video not requested.Con Python instalado, abra PowerShell en la carpeta del archivo y ejecute lo siguiente. También sirve otro servidor HTTP. Si 8000 está ocupado, elija un puerto libre.
python -m http.server 8000 --bind 127.0.0.1- Abra
http://127.0.0.1:8000/ytplayer-demo.html, sin abrir el archivo mediante doble clic. - Load YouTube background inicia la conexión externa y la preparación.
- El evento real de reproducción muestra Playing muted background. y habilita Pause. Estar preparado no demuestra que el vídeo se reproduzca.
- Si está preparado pero detenido, pruebe Play. Pause pausa; estos controles no resuelven bloqueos de red o inserción.
- Static background / reload recarga todo el documento, termina el vídeo y las solicitudes del anterior y vuelve al inicio. También reinicia el resto del estado de la práctica.
- Detenga el servidor con Ctrl+C en la terminal.
En Windows Edge con jQuery 3.7.1 se comprobaron la inicialización del plugin real, solicitudes externas bloqueadas deliberadamente, fallos de dependencias, movimiento reducido y recarga. El éxito de la transmisión debe evaluarse por separado; estas comprobaciones no garantizan reproducción en todos los dispositivos.
Opciones y estados de reproducción
containment="self" usa el elemento seleccionado. Sin altura no habrá fondo visible. La regla del ejemplo impone anchura del 100 % y altura de 340px y elimina el padding de proporción, por encima de los estilos en línea del plugin. body aplica a toda la página y exige revisar las capas. Empiece con una zona limitada. Al rellenar una zona estrecha, un vídeo 16:9 puede recortarse; no coloque información indispensable solo en sus bordes.
mute=true solicita silencio, loop=true repetición y autoPlay=true un intento de inicio al estar preparado. Las reglas de reproducción automática, los permisos iframe y el dispositivo afectan al resultado. onReady indica preparación; YTPPlay, reproducción. El mensaje tras 15 segundos significa espera, no diagnóstico de error.
useOnMobile=false conserva el degradado cuando el plugin identifica un móvil. Una ventana estrecha de escritorio no equivale a probar un teléfono. Load comprueba movimiento reducido y evita inicializar si vale reduce; no sigue los cambios de preferencia después de empezar.
useNoCookie=true selecciona youtube-nocookie.com, sin eliminar toda conexión externa ni todo tratamiento de datos. El botón explícito aclara cuándo comienza la conexión. La información y los ajustes de privacidad deben corresponder al funcionamiento real del sitio.
Diagnóstico y límites de YouTube
Si no aparece nada, revise jQuery, plugin, CSS y solicitudes YouTube en Network, y el primer error de Console. Compruebe extensiones, red y Content Security Policy. Si no llega el script API, quizá nunca se ejecute onError; por eso se conserva el mensaje de espera y el regreso al fondo estático.
La referencia de errores IFrame API describe 100 como vídeo no disponible, eliminado o privado; 101 y 150 como inserción prohibida; 153 como falta de HTTP Referer o identificación equivalente del cliente. Examine servidor, WebView y solicitudes reales del navegador, sin añadir no-referrer como supuesto arreglo.
showControls configura los controles del plugin; no promete eliminar toda publicidad o marca YouTube. Los parámetros actuales de YouTube documentan opciones retiradas como modestbranding. quality=highres tampoco garantiza la máxima calidad. Diseñe teniendo en cuenta las decisiones y elementos reales de la plataforma.
La lectura y las acciones principales no deben depender de la decoración. Si ver el vídeo es necesario para entender el contenido, utilice un reproductor convencional controlable con subtítulos y explicaciones apropiados.
