@@ -8,27 +8,29 @@
     <script defer src="face-api.min.js"></script>
     <script defer src="script.js"></script>
     <style>
-      body {
-        margin: 0;
-        padding: 0;
-        width: 100vw;
-        height: 100vh;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-
       canvas {
         position: absolute;
       }
 
+      #container {
+        position: relative;
+        display: flex;
+        justify-content: center;
+      }
+
       #video {
         display: none;
       }
+
+      #loading {
+        text-align: center;
+      }
     </style>
   </head>
   <body>
-    <video id="video" width="720" height="560" autoplay muted></video>
-    <p id="loading">Wating for camera to load</p>
+    <div id="container">
+      <video id="video" width="300" height="300" autoplay muted></video>
+      <p id="loading">Wating for camera to load</p>
+    </div>
   </body>
 </html>
@@ -1,3 +1,4 @@
+const container = document.getElementById("container");
 const video = document.getElementById("video");
 const loader = document.getElementById("loading");
 
@@ -25,7 +26,7 @@ function startVideo() {
 
 video.addEventListener("play", () => {
   const canvas = faceapi.createCanvasFromMedia(video);
-  document.body.append(canvas);
+  container.appendChild(canvas);
   const displaySize = { width: video.width, height: video.height };
   faceapi.matchDimensions(canvas, displaySize);
   setInterval(async () => {