feat: display full screen

san1234100 · Feb 27, 2024 · 861ee5c · 861ee5c
1 parent 0477bed
commit 861ee5c
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 2 deletions.
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -11,7 +11,7 @@ function getThumbnail() {
     if (videoId) {
       let thumbnailUrl = 'https://img.youtube.com/vi/' + videoId + '/maxresdefault.jpg';
       console.log(thumbnailUrl);
-      youtubeThumbnailEl.innerHTML = '<img src="' + thumbnailUrl + '">';
+      youtubeThumbnailEl.innerHTML = '<img class="w-[100%]" src="' + thumbnailUrl + '">';
     } else {
       alert('Invalid YouTube Link');
     }
@@ -25,4 +25,36 @@ function getThumbnail() {
     } else {
       return null;
     }
+  }
+
+  youtubeThumbnailEl.addEventListener('click', () => {
+    if (document.youtubeThumbnailEl) {
+      exitFullscreen();
+    } else {
+      enterFullscreen(youtubeThumbnailEl);
+    }
+  });
+
+  function enterFullscreen(element) {
+    if (element.requestFullscreen) {
+      element.requestFullscreen();
+    } else if (element.mozRequestFullScreen) { /* Firefox */
+      element.mozRequestFullScreen();
+    } else if (element.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
+      element.webkitRequestFullscreen();
+    } else if (element.msRequestFullscreen) { /* IE/Edge */
+      element.msRequestFullscreen();
+    }
+  }
+
+  function exitFullscreen() {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    } else if (document.mozCancelFullScreen) { /* Firefox */
+      document.mozCancelFullScreen();
+    } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
+      document.webkitExitFullscreen();
+    } else if (document.msExitFullscreen) { /* IE/Edge */
+      document.msExitFullscreen();
+    }
   }
diff --git a/index.html b/index.html
@@ -21,7 +21,7 @@ <h1 class="text-2xl font-semibold">YoutubeThumbGrab</h1>
        <button class="w-full mt-3 py-2 bg-[#720455] rounded font-medium hover:bg-[#61084a]">Grab the thumbnail</button>
        <div class="mt-5 rounded" id="youtubeThumbnail"></div>
       </div>
-
+      <div class="text-center text-white font-semibold text-2xl mt-5">Click on image to display full screen</div>
     <script type="module" src="/assets/js/main.js"></script>
   </body>
 </html>