<video id="video" controls src="https://rawcdn.githack.com/Freshman-tech/custom-html5-video/911e6fbfc39d670cb26e94d6f3013b9426f4a679/video.mp4"></video>
<button id="pipButton" class="btn btn-lg btn-primary hidden" disabled>Enter Picture-in-Picture mode</button>

body {
  padding: 20px
}

video {
  max-width: 100%;
  border: 1px solid;
}

.btn {
  display: block;
  margin-top: 20px;
}

.hidden {
  display: none;
}

const video = document.getElementById('video');
const pipButton = document.getElementById('pipButton');

if ('pictureInPictureEnabled' in document) {
  pipButton.classList.remove('hidden')
  pipButton.disabled = false;
  
  pipButton.addEventListener('click', () => {
    if (document.pictureInPictureElement) {
      document
        .exitPictureInPicture()
        .catch(error => {
          // Error handling
        })
    } else {
      video
      .requestPictureInPicture()
      .catch(error => {
        // Error handling
      });
    }
  });
}

video.addEventListener('enterpictureinpicture', () => {
    pipButton.textContent = 'Exit Picture-in-Picture mode';
});

video.addEventListener('leavepictureinpicture', () => {
    pipButton.textContent = 'Enter Picture-in-Picture mode';
});