diff --git a/src/scheduler/templates/watch.html b/src/scheduler/templates/watch.html
index d4b89d2..ec7be31 100644
--- a/src/scheduler/templates/watch.html
+++ b/src/scheduler/templates/watch.html
@@ -21,29 +21,50 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/plyr/dist/plyr.min.css">
     <style>
         body {
-            margin: 0;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-	    background-color: #212529;
+	        background-color: #212529;
         }
-        
+
         #player-container {
             width: 100%;
             height: 100vh; /* 100% of the viewport height */
             object-fit: cover; /* This ensures the video covers the entire container, maintaining its aspect ratio */
         }
+
+        .video-container {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            width: 100%;
+            height: 100%; 
+            overflow: hidden;
+        }
+
+        .video-container video {
+            /* Make video to at least 100% wide and tall */
+            min-width: 100%; 
+            min-height: 100%; 
+          
+            /* Setting width & height to auto prevents the browser from stretching or squishing the video */
+            width: auto;
+            height: auto;
+          
+            /* Center the video */
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%,-50%);
+        }
     </style>
     <title>DeflaxTV Video Player</title>
 </head>
 <body>
 
-<div id="player-container">
-    <video id="player" playsinline controls>
+<div class="video-container">
+    <video>
         <source src="{{ url_for('video_route', file_name=video_file) }}" type="video/mp4">
     </video>
 </div>
+
 <script src="https://cdn.jsdelivr.net/npm/plyr/dist/plyr.min.js" crossorigin="anonymous"></script>
 <script>
     document.addEventListener('DOMContentLoaded', function () {
