From b40d8174fb0ec77d355aa4ead980201a0909f875 Mon Sep 17 00:00:00 2001
From: Aji Kamaludin <aji19kamaludin@gmail.com>
Date: Tue, 4 Sep 2018 16:02:19 +0700
Subject: [PATCH] Update index.html

---
 index.html | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/index.html b/index.html
index 0a74fb0..0e89f3b 100644
--- a/index.html
+++ b/index.html
@@ -19,6 +19,30 @@
       <button name="shareButton" id="shareButton" >Share</button>
     </div>
   </section>
+    <video id="video" src="https://www.videvo.net/videvo_files/converted/2017_04/videos/170216A_023_BoyatWindow4_1080p.mp439692.mp4"></video>
+
+<button id="pipButton"></button>
+
+<script>
+  // Hide button if Picture In Picture is not supported.
+  pipButton.hidden = !document.pictureInPictureEnabled;
+
+  pipButton.addEventListener('click', function() {
+    // If there is no element in Picture In Picture yet, let's request Picture
+    // In Picture for the video, otherwise leave it.
+    if (!document.pictureInPictureElement) {
+      video.requestPictureInPicture()
+      .catch(error => {
+        // Video failed to enter Picture In Picture mode.
+      });
+    } else {
+      document.exitPictureInPicture()
+      .catch(error => {
+        // Video failed to leave Picture In Picture mode.
+      });
+    }
+  });
+</script>
   </body>
   <script>
   shareButton.addEventListener("click", async () => {