jQuery / Plugin / jquery.mb.YTPlayer — YouTube-Video als Hintergrund
jquery.mb.YTPlayer platziert ein YouTube-Video hinter einer Seite oder einem bestimmten Element. Laden Sie vollständiges jQuery sowie CSS und JavaScript des Plugins und rufen Sie .YTPlayer() für einen Bereich mit Höhe auf. Wesentliche Inhalte und Bedienung müssen auch ohne Video verfügbar bleiben.
Dateien und Voraussetzungen
Die Installationsanleitung des Entwicklers verlangt einen Webserver; file:// und jQuery slim werden nicht unterstützt. Dieses Beispiel fixiert vollständiges jQuery 3.7.1 und Plugin 3.4.6. Auch die Paketdeklaration nennt jQuery 3.x. Ein Wechsel auf Version 4 benötigt eine eigene Kompatibilitätsprüfung mit dem Plugin.
Die Reihenfolge lautet jQuery, Plugin, Initialisierung. Das Stylesheet gehört dazu. Liefert ein WordPress-Theme bereits jQuery, verwalten Sie registrierte Skriptabhängigkeiten, statt eine zweite Kopie in den Beitrag einzufügen. Der folgende Code ist eine eigenständige Übungsdatei.
Vollständiger Hintergrund für ein Element
Speichern Sie UTF-8 als ytplayer-demo.html. Die Video-ID stammt aus YouTubes API-Beispielen. Für den Betrieb wählen Sie ein Video mit passenden Nutzungs- und Einbettungsrechten. Text und Schaltflächen bleiben außerhalb des dekorativen Bereichs.
<!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>Anfangs wird kein YouTube-Video angefordert. jQuery und Plugin-Dateien vom CDN werden bereits beim Seitenaufruf geladen.
Static background; video not requested.Mit installiertem Python öffnen Sie PowerShell im Dateiordner und starten den folgenden Befehl. Ein anderer HTTP-Server ist ebenfalls möglich. Ist Port 8000 belegt, wählen Sie einen freien Port.
python -m http.server 8000 --bind 127.0.0.1- Öffnen Sie
http://127.0.0.1:8000/ytplayer-demo.htmlstatt eines Doppelklicks auf die Datei. - Load YouTube background beginnt externe Verbindung und Initialisierung.
- Erst das Wiedergabeereignis meldet Playing muted background. und aktiviert Pause. Bereit bedeutet noch nicht abgespielt.
- Wenn bereit, aber unbewegt, versuchen Sie Play. Pause hält an; die Schaltflächen beheben keine Netz- oder Einbettungssperren.
- Static background / reload lädt das gesamte Dokument neu, beendet das bisherige Video samt Dokumentanfragen und setzt die Übung zurück.
- Beenden Sie den Server im Terminal mit Strg+C.
Geprüft wurden unter Windows Edge mit jQuery 3.7.1 die echte Plugin-Initialisierung, absichtlich blockierte externe Anfragen, fehlende Abhängigkeiten, reduzierte Bewegung und Neuladen. Erfolgreiches Streaming ist davon getrennt zu beurteilen. Daraus folgt keine Wiedergabegarantie für jedes Gerät.
Optionen und Zustände auswerten
containment="self" verwendet das gewählte Element. Ohne Höhe bleibt nichts sichtbar, daher erzwingt die Übung Breite 100 %, Höhe 340px und padding=0 mit Vorrang vor Inline-Maßen und Verhältnisabständen des Plugins. body verwendet die gesamte Seite und erfordert zusätzliche Prüfung der Ebenen. Beginnen Sie mit einem begrenzten Bereich. Beim Füllen kann ein 16:9-Video beschnitten werden; wichtige Informationen gehören deshalb nicht allein ins Hintergrundbild.
mute=true fordert stummes Abspielen an, loop=true Wiederholung und autoPlay=true einen Startversuch nach Bereitschaft. Autoplay-Regeln, iframe-Berechtigungen und Gerätebedingungen wirken mit. onReady meldet Bereitschaft, YTPPlay Wiedergabe. Der Hinweis nach 15 Sekunden bedeutet Warten, keine festgestellte Fehlerursache.
useOnMobile=false lässt den Verlauf stehen, wenn das Plugin ein Mobilgerät erkennt. Ein schmales Desktopfenster ersetzt keinen Gerätetest. Beim Laden prüft der Code reduzierte Bewegung und überspringt die Initialisierung bei reduce. Änderungen der Einstellung nach Wiedergabestart werden nicht laufend verfolgt.
useNoCookie=true wählt youtube-nocookie.com. Externe Verbindungen und sämtliche Datenverarbeitung verschwinden dadurch nicht. Die Ladeschaltfläche verdeutlicht den Verbindungszeitpunkt; Datenschutzinformationen und Einstellungen müssen zum tatsächlichen Betrieb passen.
Fehler und Plattformgrenzen prüfen
Untersuchen Sie bei leerem Bereich in Network jQuery, Plugin, CSS und YouTube-Anfragen sowie den ersten Console-Fehler. Prüfen Sie Erweiterungen, Netzwerk und Content Security Policy. Bleibt schon das API-Skript aus, erreicht der Ablauf möglicherweise nie onError; deshalb bleiben Wartehinweis und statischer Neustart erreichbar.
Laut IFrame-API-Fehlerreferenz bedeutet 100 ein nicht verfügbares, gelöschtes oder privates Video, 101 beziehungsweise 150 ein Einbettungsverbot und 153 fehlenden HTTP Referer oder gleichwertige Clientidentität. Prüfen Sie tatsächliche Server-, Webview- und Browseranfragen, statt no-referrer als vermeintliche Lösung einzubauen.
showControls betrifft die Plugin-Bedienung und verspricht nicht die Entfernung aller Anzeigen oder YouTube-Kennzeichen. Die aktuellen YouTube-Parameter nennen unter anderem modestbranding als veraltet. quality=highres erzwingt nicht zuverlässig maximale Qualität. Berücksichtigen Sie die tatsächliche Plattformdarstellung.
Lesen und zentrale Aktionen dürfen nicht vom dekorativen Video abhängen. Ist Anschauen zum Verständnis nötig, verwenden Sie einen gewöhnlichen bedienbaren Player mit geeigneten Untertiteln und Erläuterungen.
