← Все примеры

JavaScript Медиа vimeo.com

Vimeo: кнопка «картинка в картинке»

Добавляет плавающую кнопку, открывающую видео в режиме «картинка в картинке» и закрывающую его.

Код для копирования

// Add a floating button that opens the video in picture-in-picture
function addPipButton() {
  if (document.getElementById('jz-vmo-pip')) return;
  const v = document.querySelector('video');
  if (!v) return;
  const b = document.createElement('button');
  b.id = 'jz-vmo-pip';
  b.textContent = 'PiP';
  b.style.cssText = 'position:fixed;bottom:14px;right:14px;z-index:99999;background:#00adef;color:#fff;border:0;border-radius:6px;padding:8px 12px;font:13px sans-serif;cursor:pointer;';
  b.addEventListener('click', function () {
    const vid = document.querySelector('video');
    if (vid && document.pictureInPictureEnabled) {
      if (document.pictureInPictureElement) { document.exitPictureInPicture(); }
      else { vid.requestPictureInPicture().catch(function () {}); }
    }
  });
  document.body.appendChild(b);
}
addPipButton();
const obs = new MutationObserver(addPipButton);
obs.observe(document.documentElement, { childList: true, subtree: true });

Как использовать этот пример

  1. Скопируй код кнопкой выше.
  2. Установи JustZix (2 минуты) и открой расширение на нужной странице.
  3. Добавь новое правило, совпадающее с этой страницей.
  4. Вставь код в панель JavaScript правила и сохрани — он запускается при каждом заходе на страницу.

Оцени этот пример

Оценок пока нет — оцени первым.

Этот пример работает?

Сниппеты бесполезны, если их некуда вставить.

JustZix устанавливается за 2 минуты и запускает твой код на каждой подходящей странице. Без аккаунта, без оплаты.

Скачать бесплатно Смотреть применение