line-live-pip.js

(() => {
    const togglePIP = (video) => {
        if (!video.webkitSetPresentationMode) {
            alert("This browser is not support PIP mode.");
            return;
        }
        video.webkitSetPresentationMode(video.webkitPresentationMode === "picture-in-picture" ? "inline" : "picture-in-picture");
    };

    const video = document.querySelector("video");
    const ul = document.querySelector("ul[class$=Share]");
    const li = document.createElement("li");
    const button = document.createElement("button");

    button.type = "button";
    button.style.width = "31px";
    button.style.height = "31px";
    button.style.backgroundColor = "#888";
    button.style.borderRadius = "100%";
    button.textContent = "P";
    button.addEventListener("click", (e) => togglePIP(video));

    li.appendChild(button);
    ul.insertBefore(li, ul.firstChild);
})();