← Tutti gli articoli

Tutorial

Aggiungi un pulsante picture-in-picture a qualsiasi video

17 maggio 2026 · di JustZix Team

Il picture-in-picture lascia fluttuare un video sopra ogni altra finestra mentre lavori. I browser lo supportano nativamente, ma molti siti eliminano il pulsante dal loro lettore. Una regola JustZix lo rimette su ogni video.

L'API in una riga

Qualsiasi elemento <video> con i metadati caricati può essere spostato in una finestra mobile con video.requestPictureInPicture(). Restituisce una promessa, e il browser richiede che sia attivata da un gesto dell'utente come un clic.

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

Questo è l'intero motore. Il resto di questo articolo lo avvolge in un pulsante che puoi cliccare su qualsiasi pagina.

Un pulsante PiP flottante

Questa regola inietta un singolo pulsante. Cliccarlo trova il video più grande in riproduzione e lo fa uscire. Scegliere il video più grande evita di attivarsi su minuscole clip di sfondo o pubblicitarie.

(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 = 'No PiP';
      setTimeout(function () { btn.textContent = 'PiP'; }, 1500);
    });
  });
})();

Lo stesso pulsante alterna: se un video è già in PiP chiama exitPictureInPicture(). Il controllo readyState > 0 salta i video che non hanno ancora caricato i metadati, poiché l'API li rifiuta.

Fai doppio clic su qualsiasi video per farlo uscire

Se preferisci nessun pulsante sullo schermo, associa l'azione direttamente ai video. Questa regola fa sì che un doppio clic sul video stesso alterni il PiP.

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);

Poiché l'ascoltatore usa la cattura, viene eseguito prima del gestore del doppio clic del sito, e preventDefault() impedisce al lettore di passare a schermo intero nello stesso momento.

Reagire agli eventi PiP

Puoi tenere sincronizzata la tua interfaccia ascoltando enterpictureinpicture e leavepictureinpicture su un video:

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

Consigli per un comportamento affidabile

• Il PiP ha bisogno di un contesto sicuro. Funziona su pagine https e si rifiuta su http semplice.
• Se un sito imposta disablePictureInPicture sull'elemento, eliminalo prima con video.disablePictureInPicture = false.
• Alcuni siti a pagina singola scambiano l'elemento video durante la navigazione, quindi tieni la regola del pulsante attiva a livello di sito anziché per pagina.

Prendi una versione confezionata dai nostri esempi pronti all'uso oppure scarica JustZix per aggiungerlo tu stesso. Per impedire del tutto la riproduzione automatica dei video, leggi come fermare la riproduzione automatica di video e audio.