Starting point for an animated GIF-like video web component

gif-like.js

// https://cloudfour.com/thinks/video-gifs-are-forever-lets-make-them-better/

class GifLike extends HTMLElement {
  static motionQuery = window.matchMedia(
    "(prefers-reduced-motion: no-preference)"
  );

  connectedCallback() {
    this.video = this.querySelector("video");

    GifLike.motionQuery.addEventListener("change", (query) => {
      this.toggle(query.matches);
    });

    this.toggle(GifLike.motionQuery.matches);
  }

  toggle(state) {
    if (state) {
      this.video.play();
    } else {
      this.video.pause();
    }
  }
}

customElements.define("gif-like", GifLike);

More context and resources →