Added channel overlay to fullscreen video player

public/css/main.css

@@ -498,6 +498,23 @@ h4 {
   pointer-events: none;
 }
 
+/* Fullscreen mode for video container */
+.video-container:fullscreen {
+  width: 100%;
+  height: 100%;
+  background: #000;
+}
+
+.video-container:fullscreen #video-player {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.video-container:fullscreen .now-playing-overlay {
+  bottom: 80px;
+}
+
 .channel-nav {
   display: flex;
   flex-direction: column;

public/js/components/VideoPlayer.js

@@ -6,6 +6,7 @@
 class VideoPlayer {
     constructor() {
         this.video = document.getElementById('video-player');
+        this.container = document.querySelector('.video-container');
         this.overlay = document.getElementById('player-overlay');
         this.nowPlaying = document.getElementById('now-playing');
         this.hls = null;
@@ -495,8 +496,8 @@ class VideoPlayer {
     toggleFullscreen() {
         if (document.fullscreenElement) {
             document.exitFullscreen();
-        } else {
-            this.video.requestFullscreen();
+        } else if (this.container) {
+            this.container.requestFullscreen();
         }
     }
 }