<div class="content">
<h1>Disable Picture-in-Picture</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 disablePictureInPicture  src="https://res.cloudinary.com/atapas/video/upload/v1620052733/demos/earth_rotating_g1xv0f.mp4" id="video" muted autoplay loop></video>
  
  <button class="action" onclick="toggle()">Toggle picture-in-picture</button>
</div>

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;
}

function toggle() {
  if (document.pictureInPictureElement) {
      document.exitPictureInPicture();
  } else if (document.pictureInPictureEnabled) {
      video.requestPictureInPicture();
  }
}