Simplify video component

src/page/video/video.html.ts

@@ -19,7 +19,7 @@ export const generate = ({
       alt: altText,
       isIgnoredByImageViewer: true,
     })}
-    <video playsinline preload="none">
+    <video playsinline controls preload="none">
         <source src="${webm}" type="video/webm"/>
         <source src="${mp4}" type="video/mp4"/>
     </video>

src/page/video/video.scss

@@ -1,16 +1,8 @@
 @use '../../style/mixins' as *;
 
 .video-container {
-  video {
-    z-index: 1;
+  &.loaded > .start-button,
+  &:not(.loaded) > video {
     visibility: hidden;
   }
-
-  .start-button {
-    z-index: 1;
-  }
-
-  &.fully-loaded video {
-    visibility: visible;
-  }
 }

src/page/video/video.ts

@@ -4,31 +4,15 @@ import { VideoParameters } from './video-parameters';
 import { generate } from './video.html';
 
 export class Video extends PageElement {
-  private video: HTMLVideoElement;
-
   public constructor(options: VideoParameters) {
     super(createElement(generate(options)));
-    this.video = this.query('video') as HTMLVideoElement;
 
-    this.htmlRoot.addEventListener('click', this.startVideo.bind(this));
     this.query('.start-button').addEventListener('click', this.startVideo.bind(this));
-
-    this.video.addEventListener('pause', this.pauseVideo.bind(this));
   }
 
   private startVideo() {
-    if (this.video.paused) {
-      this.query('.start-button').style.visibility = 'hidden';
-      this.htmlRoot.classList.add('loaded');
-      this.video.play();
-      this.video.controls = true;
-    }
-  }
-
-  private pauseVideo() {
-    if (this.video.paused) {
-      this.query('.start-button').style.visibility = 'visible';
-      this.video.controls = false;
-    }
+    this.query('.start-button').style.visibility = 'hidden';
+    this.htmlRoot.classList.add('loaded');
+    (this.query('video') as HTMLVideoElement).play();
   }
 }