<div class="content">
<h1>Picture-in-Picture Auto</h1>
<p>The Picture-in-Picture API allow websites to create a floating video window always on top of other windows so that users may continue consuming media while they interact with other content sites, or applications on their device.</p>
<div class="demo">
<video autoPictureInPicture=true src="https://res.cloudinary.com/atapas/video/upload/v1620052733/demos/earth_rotating_g1xv0f.mp4" id="videoId" muted autoplay loop></video>
video{
border-radius: 4px;
margin: 0 0 3px 0;
}
.demo {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 10px;
}
.action{
display: block;
background-color: #0098ff;
color: #FFF;
padding: 8px;
border: 1px solid #0098ff;
border-radius: 4px;
cursor: pointer;
}
:picture-in-picture {
box-shadow: 0 0 0 5px #0081ff;
background-color: #565652;
}
document.getElementById('videoId').requestPictureInPicture();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.