jQuery / Plugin / jquery.mb.YTPlayer — Utiliser une vidéo YouTube en arrière-plan
jquery.mb.YTPlayer place une vidéo YouTube derrière toute une page ou un élément. Chargez jQuery complet, la feuille CSS et le script du plugin, puis appelez .YTPlayer() sur une zone possédant une hauteur. Le contenu et les commandes essentiels doivent rester utilisables lorsque la vidéo ne démarre pas.
Fichiers et conditions d’exécution
Le guide du développeur exige un serveur Web et exclut file:// ainsi que jQuery slim. Cet exemple fixe jQuery complet 3.7.1 et le plugin 3.4.6. La déclaration du paquet indique également une dépendance jQuery 3.x. Passer à jQuery 4 demande un contrôle de compatibilité du plugin, pas un simple changement de nom de fichier.
L’ordre est jQuery, plugin, initialisation. Incluez aussi le CSS. Si WordPress fournit déjà jQuery par le thème, gérez les dépendances des scripts enregistrés plutôt que d’ajouter une deuxième copie dans le contenu. Le document suivant est un exercice autonome.
Exemple complet pour une zone précise
Enregistrez ytplayer-demo.html en UTF-8. L’identifiant vient des exemples de l’API YouTube. En production, choisissez une vidéo avec des droits d’utilisation et une autorisation d’intégration adaptés. Texte et commandes sont hors de la zone décorative.
<!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>Au départ, aucune requête vidéo YouTube n’est lancée. Les fichiers jQuery et du plugin sur CDN sont néanmoins chargés avec la page.
Static background; video not requested.Si Python est installé, ouvrez PowerShell dans le dossier du fichier et exécutez cette commande. Un autre serveur HTTP convient aussi. Si 8000 est occupé, choisissez un port libre.
python -m http.server 8000 --bind 127.0.0.1- Ouvrez
http://127.0.0.1:8000/ytplayer-demo.htmlau lieu de double-cliquer le fichier. - Load YouTube background lance la connexion externe et la préparation du lecteur.
- L’événement de lecture affiche Playing muted background. et active Pause. Le lecteur prêt ne prouve pas la lecture.
- S’il est prêt mais immobile, essayez Play. Pause suspend la lecture ; ces boutons ne suppriment pas une restriction réseau ou d’intégration.
- Static background / reload recharge tout le document, termine la vidéo et les requêtes du document précédent, puis restaure l’état initial. Les autres états de l’exercice sont aussi réinitialisés.
- Arrêtez le serveur dans le terminal avec Ctrl+C.
Sous Windows Edge avec jQuery 3.7.1, les contrôles ont porté sur l’initialisation du véritable plugin, des requêtes externes volontairement bloquées, une dépendance manquante, le mouvement réduit et le rechargement. Une diffusion vidéo réussie doit être évaluée séparément ; ces contrôles ne garantissent pas une lecture sur tous les appareils.
Options et états observables
containment="self" utilise l’élément sélectionné. Une hauteur nulle ne laisse rien voir. La règle de l’exemple impose une largeur de 100 % et une hauteur de 340px, et supprime le padding de ratio, avec priorité sur les styles en ligne du plugin. containment="body" concerne la page entière et demande une vérification des superpositions. Commencez dans une zone limitée. Remplir une zone étroite peut rogner une vidéo 16:9 ; aucune information essentielle ne doit dépendre de ses bords.
mute=true demande le silence, loop=true la répétition et autoPlay=true une tentative de démarrage après préparation. Les règles de lecture automatique, les permissions iframe et l’appareil influencent le résultat. onReady signale la préparation, YTPPlay la lecture. Le message à 15 secondes indique une attente, pas une cause d’échec identifiée.
useOnMobile=false conserve le dégradé sur les appareils identifiés comme mobiles par le plugin. Une fenêtre de bureau étroite ne remplace pas un téléphone réel. Lors du clic Load, le code évite l’initialisation si la préférence de mouvement réduit vaut reduce ; il ne suit pas les changements après le début de lecture.
useNoCookie=true choisit youtube-nocookie.com. Cela ne supprime pas toute connexion externe ni tout traitement de données. Le bouton explicite rend le moment de connexion visible. Les informations et réglages de confidentialité du site doivent correspondre à son fonctionnement réel.
Échecs et limites YouTube
Si la zone reste vide, inspectez dans Network jQuery, le plugin, son CSS et YouTube, puis la première erreur Console. Vérifiez extensions, réseau et Content Security Policy. Si le script API ne vient jamais, onError peut ne pas être atteint ; le message d’attente et le retour statique restent donc nécessaires.
La référence des erreurs IFrame API définit 100 comme vidéo indisponible, supprimée ou privée, 101 et 150 comme intégration interdite, 153 comme absence de HTTP Referer ou d’identité client équivalente. Examinez les requêtes réelles du serveur, de la WebView et du navigateur au lieu d’ajouter no-referrer comme solution supposée.
showControls concerne les commandes du plugin ; il ne garantit pas la suppression de toutes les annonces ou marques YouTube. Les paramètres YouTube actuels indiquent notamment l’abandon de modestbranding. quality=highres ne permet pas de garantir la qualité maximale. Prévoyez les choix et affichages réels de la plateforme.
Lecture du texte et actions centrales doivent fonctionner sans cette décoration. Si regarder la vidéo est indispensable à la compréhension, préférez un lecteur classique utilisable, avec sous-titres et explications appropriés.
