Improve video UX

src/page/background/background.scss

@@ -7,6 +7,7 @@
   top: 0;
   border-radius: 1000px;
   transition: background-color var(--transition-time);
+  transform: translateX(-100%);
 
   &:nth-child(odd) {
     background-color: #fff9e0;

src/page/basics/image/image.html.ts

@@ -16,7 +16,13 @@ export const generate = ({
   alt: string;
   container: boolean;
 }): html => `
-  ${container ? `<div class="figure-container">` : ''}
+  ${
+    container
+      ? `<div class="figure-container" style="padding-top:${(imageJpeg.height /
+          imageJpeg.width) *
+          100}%">`
+      : ''
+  }
   <picture loading="lazy">
     <source
       srcset="${imageWebP.srcSet}" 

src/page/basics/preview/preview.html.ts

@@ -8,8 +8,8 @@ export const generate = ({ alt }: { alt: string }): html => `
     <img image-viewer-ignore class="poster" />
     <div class="overlay">
       <div class="loading">${loading}</div>
-      <iframe title="${alt}" height=300 allowfullscreen loading="lazy"></iframe>
-      <div class="load-button">${play}</div>
+      <iframe title="${alt}" allowfullscreen loading="lazy"></iframe>
+      <div class="start-button">${play}</div>
     </div>
   </div>
 `;

src/page/basics/preview/preview.scss

@@ -9,27 +9,9 @@
     left: 0;
     top: 0;
 
-    * {
+    iframe {
       position: absolute;
       left: 0;
-      right: 0;
-    }
-
-    .load-button {
-      @include image-button(var(--large-icon-size));
-      @include absolute-center;
-      @include square(calc(var(--large-icon-size) + var(--normal-margin) * 2));
-
-      &:hover svg {
-        box-shadow: var(--shadow);
-      }
-
-      svg {
-        border-radius: 10000px;
-        backdrop-filter: blur(16px);
-        transition: transform var(--transition-time), box-shadow var(--transition-time);
-        stroke: var(--normal-text-color);
-      }
     }
 
     .loading {
@@ -54,9 +36,10 @@
 
   &.loaded {
     .figure-container,
-    .load-button {
+    .start-button {
       visibility: hidden;
     }
+
     .loading {
       visibility: visible;
     }

src/page/basics/preview/preview.ts

@@ -14,7 +14,7 @@ export class Preview extends PageElement {
     super(createElement(generate({ alt })));
     this.url += '?portfolioView';
     this.attachElementByReplacing('.poster', new Image(posterWebP, posterJpeg, alt));
-    this.query('.load-button').addEventListener('click', this.loadContent.bind(this));
+    this.query('.start-button').addEventListener('click', this.loadContent.bind(this));
   }
 
   public setParent(parent: PageElement) {

src/page/basics/video/video.html.ts

@@ -1,26 +1,17 @@
 import './video.scss';
-import { url } from '../../../types/url';
-import { html } from '../../../types/html';
 
-export const generate = ({
-  webm,
-  mp4,
-  poster,
-  shouldActLikeGif,
-  container,
-}: {
-  webm: url;
-  mp4: url;
-  poster?: url;
-  shouldActLikeGif?: boolean;
-  container?: boolean;
-}): html => `
-  ${container === undefined || container ? `<div class="figure-container">` : ''}
-    <video loading="lazy" ${
-      shouldActLikeGif ? 'autoplay loop muted' : ''
-    } controls playsinline preload="metadata" ${poster ? `poster="${poster}` : ''}" >
+import { html } from '../../../types/html';
+import play from '../../../static/icons/play-button.svg';
+import { VideoParameters } from './video';
+import { last } from '../../../helper/last';
+
+export const generate = ({ webm, mp4, poster, invertButton }: VideoParameters): html => `
+  <div class="figure-container" style="padding-top:${(poster.height / poster.width) *
+    100}%">
+    <video playsinline preload="none" poster="${last(poster.images)!.path}">
         <source src="${webm}" type="video/webm"/>
         <source src="${mp4}" type="video/mp4"/>
     </video>
-  ${container === undefined || container ? `</div>` : ''}
+    <div class="start-button ${invertButton ? 'inverted' : ''}">${play}</div>
+  </div>
 `;

src/page/basics/video/video.scss

@@ -0,0 +1 @@
+@use '../../../style/mixins' as *;

src/page/basics/video/video.ts

@@ -2,15 +2,40 @@ import { PageElement } from '../../page-element';
 import { createElement } from '../../../helper/create-element';
 import { generate } from './video.html';
 import { url } from '../../../types/url';
+import { ResponsiveImage } from '../../../types/responsive-image';
+
+export interface VideoParameters {
+  mp4: url;
+  webm: url;
+  poster: ResponsiveImage;
+  invertButton?: boolean;
+}
 
 export class Video extends PageElement {
-  public constructor(options: {
-    poster?: url;
-    mp4: url;
-    webm: url;
-    shouldActLikeGif?: boolean;
-    container?: boolean;
-  }) {
+  private video: HTMLVideoElement;
+
+  public constructor(options: VideoParameters) {
     super(createElement(generate(options)));
+    this.video = this.query('video') as HTMLVideoElement;
+    this.video.addEventListener('click', this.startVideo.bind(this));
+    this.query('.start-button').addEventListener('click', this.startVideo.bind(this));
+    this.video.addEventListener('pause', this.stopVideo.bind(this));
+  }
+
+  private startVideo(e: Event) {
+    if (this.video.paused) {
+      this.query('.start-button').style.visibility = 'hidden';
+      this.video.play();
+      this.video.controls = true;
+      e.preventDefault();
+    }
+  }
+
+  private stopVideo(e: Event) {
+    if (this.video.paused) {
+      this.query('.start-button').style.visibility = 'visible';
+      this.video.controls = false;
+      e.preventDefault();
+    }
   }
 }