Move files and add minor fixes

src/page/video/video-parameters.ts

@@ -0,0 +1,10 @@
+import { ResponsiveImage } from '../../types/responsive-image';
+import { url } from '../../types/url';
+
+export interface VideoParameters {
+  mp4: url;
+  webm: url;
+  poster: ResponsiveImage;
+  altText: string;
+  invertButton?: boolean;
+}

src/page/video/video.html.ts

@@ -0,0 +1,28 @@
+import play from '../../../static/icons/play-button.svg';
+import { html } from '../../types/html';
+import { Image } from '../image-viewer/image/image.html';
+import { VideoParameters } from './video-parameters';
+import './video.scss';
+
+export const generate = ({
+  webm,
+  mp4,
+  poster,
+  invertButton,
+  altText,
+}: VideoParameters): html => `
+  <div class="figure-container video-container" style="padding-top:${
+    (poster.height / poster.width) * 100
+  }%">
+    ${Image({
+      image: poster,
+      alt: altText,
+      isIgnoredByImageViewer: true,
+    })}
+    <video playsinline preload="none">
+        <source src="${webm}" type="video/webm"/>
+        <source src="${mp4}" type="video/mp4"/>
+    </video>
+    <div class="start-button ${invertButton ? 'inverted' : ''}" tabindex=0>${play}</div>
+  </div>
+`;

src/page/video/video.scss

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

src/page/video/video.ts

@@ -0,0 +1,34 @@
+import { createElement } from '../../helper/create-element';
+import { PageElement } from '../page-element';
+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;
+    }
+  }
+}