← Alle Beiträge

Anleitungen

Eine Bild-in-Bild-Schaltfläche zu jedem Video hinzufügen

17 Mai 2026 · von JustZix Team

Bild-in-Bild lässt ein Video über jedem anderen Fenster schweben, während Sie arbeiten. Browser unterstützen es nativ, aber viele Seiten entfernen die Schaltfläche aus ihrem Player. Eine JustZix-Regel setzt sie auf jedes Video zurück.

Die API in einer Zeile

Jedes <video>-Element mit geladenen Metadaten kann mit video.requestPictureInPicture() in ein schwebendes Fenster verschoben werden. Es gibt ein Promise zurück, und der Browser verlangt, dass es durch eine Nutzergeste wie einen Klick ausgelöst wird.

someVideo.requestPictureInPicture().catch(function (err) {
  console.warn('PiP abgelehnt:', err.message);
});

Das ist der ganze Motor. Der Rest dieses Artikels wickelt es in eine Schaltfläche, die Sie auf jeder Seite klicken können.

Eine schwebende PiP-Schaltfläche

Diese Regel fügt eine einzelne Schaltfläche ein. Sie zu klicken findet das größte abspielende Video und lässt es herausspringen. Das größte Video zu wählen vermeidet, bei winzigen Hintergrund- oder Werbeclips auszulösen.

(function () {
  if (!document.pictureInPictureEnabled) { return; }
  var btn = document.createElement('button');
  btn.textContent = 'PiP';
  btn.style.cssText = 'position:fixed;bottom:16px;right:16px;z-index:2147483647;'
    + 'background:#2563eb;color:#fff;border:0;border-radius:8px;'
    + 'padding:8px 14px;font:600 13px sans-serif;cursor:pointer;'
    + 'box-shadow:0 2px 8px rgba(0,0,0,.3)';
  document.body.appendChild(btn);

  function biggestVideo() {
    var best = null, bestArea = 0;
    document.querySelectorAll('video').forEach(function (v) {
      var r = v.getBoundingClientRect();
      var area = r.width * r.height;
      if (area > bestArea && v.readyState > 0) {
        best = v; bestArea = area;
      }
    });
    return best;
  }

  btn.addEventListener('click', function () {
    if (document.pictureInPictureElement) {
      document.exitPictureInPicture();
      return;
    }
    var v = biggestVideo();
    if (!v) { return; }
    v.requestPictureInPicture().catch(function (err) {
      btn.textContent = 'Kein PiP';
      setTimeout(function () { btn.textContent = 'PiP'; }, 1500);
    });
  });
})();

Dieselbe Schaltfläche schaltet um: Wenn ein Video bereits im PiP ist, ruft sie exitPictureInPicture() auf. Die readyState > 0-Prüfung überspringt Videos, die ihre Metadaten noch nicht geladen haben, da die API diese ablehnt.

Jedes Video doppelklicken, um es herauszuspringen

Wenn Sie keine Bildschirm-Schaltfläche bevorzugen, belegen Sie die Aktion direkt mit den Videos. Diese Regel lässt einen Doppelklick auf das Video selbst PiP umschalten.

document.addEventListener('dblclick', function (e) {
  var v = e.target;
  if (!v || v.tagName !== 'VIDEO') { return; }
  if (!document.pictureInPictureEnabled) { return; }
  e.preventDefault();
  if (document.pictureInPictureElement === v) {
    document.exitPictureInPicture();
  } else {
    v.requestPictureInPicture().catch(function () {});
  }
}, true);

Da der Listener Capture verwendet, läuft er vor dem eigenen Doppelklick-Handler der Seite, und preventDefault() stoppt den Player davon, gleichzeitig den Vollbildmodus umzuschalten.

Auf PiP-Ereignisse reagieren

Sie können Ihre UI synchron halten, indem Sie auf enterpictureinpicture und leavepictureinpicture auf einem Video hören:

document.addEventListener('enterpictureinpicture', function (e) {
  console.log('schwebend:', e.target.currentSrc);
}, true);

Tipps für zuverlässiges Verhalten

• PiP braucht einen sicheren Kontext. Es funktioniert auf https-Seiten und lehnt auf einfachem http ab.
• Wenn eine Seite disablePictureInPicture auf dem Element setzt, löschen Sie es zuerst mit video.disablePictureInPicture = false.
• Manche Single-Page-Seiten tauschen das Video-Element bei der Navigation aus, also halten Sie die Schaltflächenregel seitenweit aktiv statt pro Seite.

Holen Sie sich eine paketierte Version aus unseren fertigen Beispielen oder laden Sie JustZix herunter, um es selbst hinzuzufügen. Um Videos überhaupt davon abzuhalten, automatisch abzuspielen, lesen Sie Video- und Audio-Autoplay stoppen.