pictureInPicture для вк

pip.js

// ==UserScript==
// @name         pictureInPicture
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  pictureInPicture
// @license MIT
// @author       SevereCloud
// @match        https://vk.com/*
// ==/UserScript==


function pictureInPicture() {
    function insertStyles() { // Фукция иниацилизации стилей
        var style = document.createElement("style"); // Создаем элемент стилей
        style.innerHTML = '.videoplayer_pip{'+
            'position: relative;' +
            'padding: 14px 10px 0 5px;' +
            'font-size: 13px;' +
            'text-align: center;' +
            'cursor: pointer;' +
            '}'+
            '.videoplayer_pip:hover {opacity:.8;}';
        document.head.appendChild(style); // Добавляем в залоговок
    }
    function checkVideo(el) { // Функция поиска в элементе ссылок
        var links = el.querySelectorAll('.videoplayer');
        if (!links) return; // Если в элементе нет ссылок, то пропускаем
        Array.from(links).map(function (link) { // Если есть, то перебираем
            if (link.checked) return; // Если ссылка проверена, то пропускаем
            addButton(link); // Если есть, то отдаем на проверку
            link.checked = 1; // Отмечаем прочитанной
        });
    }
    function addButton(el){
        var videoPlayerUI = el.getElementsByClassName("videoplayer_controls")[0];//Элемент ui видеоплеера
        var video = el.getElementsByClassName("videoplayer_media_provider")[0];//Элемент видео

        var button = document.createElement('div')// Кнопка pictureInPicture
        button.className = 'videoplayer_pip'
        button.innerText = 'PIP'
        button.onclick = function () {
            if (!document.pictureInPictureElement) {
                video.requestPictureInPicture()
                    .catch(error => {
                    console.error('FAIL');
                });
            } else {
                document.exitPictureInPicture()
                    .catch(error => {
                    console.error('FAIL');
                });
            }
        }
        videoPlayerUI.insertBefore(button, videoPlayerUI.children[8]);
    }

    var observer = new MutationObserver(function (mutations) {
        mutations.forEach(function (mutation) { // Перебираем обновленя в элементах
            if (mutation.target.nodeType !== 1) return; // Если элемент не блок, то выходим
            checkVideo(mutation.target); // Отдаем элемент на проверку ссылок
        });
    });

    window.addEventListener("load", function () { // Вешаем обработчик на загрузку страницы
        insertStyles();
        observer.observe(document.body, { // Запускаем обработчик мутаций
            childList: true, // Проведять детей элемента
            subtree: true // по всему дереву
        });
        console.log('Загрузилось')
    });
}

if (document.pictureInPictureEnabled) {
    var script = document.createElement('script'); // Создаем скрипт
    script.appendChild(document.createTextNode('(' + pictureInPicture + ')();')); // Свставляем туда код функции
    (document.body || document.head || document.documentElement).appendChild(script); // Добавляем в body или head
} else {
    console.error('Включите pictureInPicture')
}