The picture-in-picture CSS pseudo-class represents an element which is displayed in a mode that takes up most (usually all) of the viewport, and whose viewport is confined to part of the screen while being displayed over other content.
selector:picture-in-picture
{
property: value;
}
<!doctype html>
<html>
<head>
<style>
video:picture-in-picture
{
box-shadow: yellow 0 0 0 10px;
}
</style>
</head>
<body>
<button onclick="myfunction()">button</button>
<video autoplay controls loop src="/assets/mp4/Clouds.mp4" width="100%"></video>
<script>
function myfunction()
{
if(document.pictureInPictureElement)
{
document.exitPictureInPicture();
}
else
{
document.querySelector("video").requestPictureInPicture();
}
}
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
video:picture-in-picture
{
box-shadow: yellow 0 0 0 10px;
}
</style>
</head>
<body>
<button>button</button>
<video autoplay controls loop src="/assets/mp4/Clouds.mp4" width="100%"></video>
<script>
function myfunction()
{
if(document.pictureInPictureElement)
{
document.exitPictureInPicture();
}
else
{
document.querySelector("video").requestPictureInPicture();
}
}
document.querySelector("button").addEventListener("click", myfunction);
</script>
</body>
</html>