TAG
CSS
JavaScript
Result
Run
License
<video id="player" muted autoplay controls crossorigin="anonymous"> <source src="http://resrc.devdic.com/media/video/movie.mp4" type="video/mp4" /> <source src="http://resrc.devdic.com/media/video/movie.ogg" type="video/ogg" /> </video> <button type="button" id="btn-pip-toggle" value="request">Execute to PIP</button>
:picture-in-picture { box-shadow: 0 0 10px 10px #FF0000; }
window.addEventListener("load", () => { const elVideo = document.getElementById("player"); const elBtn = document.getElementById("btn-pip-toggle"); elBtn.addEventListener("click", e => { const elTarget = e.currentTarget; if(elTarget.value == "request") { elVideo.requestPictureInPicture(); elTarget.textContent = "Exit to PIP"; elTarget.value = "exit"; } else { document.exitPictureInPicture(); elTarget.textContent = "Execute to PIP"; elTarget.value = "request"; } }); });
Console
expand_less
License
License
by DevDic
Close