<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();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.