Our videos have an SVG button on top of a thumbnail. When the PNG is clicked, the video loads and autoplays. On some browser/os platforms -- including up to date ones like Mac Monetrey and Chrome 101.xxx -- clicking the SVG fails to load/play the video.

No errors in the console... a page refresh works occasionally.

Here's the JS...

class DeferredMedia extends HTMLElement {
  constructor() {
    super();
    const poster = this.querySelector('[id^="deferred-media-"]');
    if (!poster) return;
    poster.addEventListener("click", this.loadContent.bind(this));
  }

  loadContent(focus = true) {
    //window.pauseAllMedia();
    if (!this.getAttribute("loaded")) {
      const content = document.createElement("div");
      content.appendChild(
        this.querySelector("template").content.firstElementChild.cloneNode(true)
      );

      this.setAttribute("loaded", true);
      const deferredElement = this.appendChild(
        content.querySelector("video, iframe")
      );
      if (focus) deferredElement.focus();
    }
  }
}

customElements.define("deferred-media", DeferredMedia);

And the link is...

<deferred-media><img src="//cdn.shopify.com/s/files/1/0315/7737/files/video-image.jpg?v=1650492274&amp;width=1600" alt="" loading="lazy" width="2300" height="1310"><button id="deferred-media-695906617">
        <svg width="34" height="41" viewBox="0 0 34 41" fill="none" xmlns="http://www.w3.org/2000/svg" title="Play">
          <path d="M32.6533 19.6534c.6237.3921.6237 1.3011 0 1.6932L1.7823 40.7544c-.666.4186-1.5323-.06-1.5323-.8466V1.0922c0-.7866.8663-1.2652 1.5322-.8466l30.8711 19.4078Z" fill="currentColor"></path>
        </svg>
      </button>
      <template><iframe width="1600" height="900" frameborder="0" src="https://player.vimeo.com/video/695906617?autoplay=1" allow="autoplay; encrypted-media" allowfullscreen=""></iframe></template>
    </deferred-media>

Website with sample video: https://www.fisherwallace.com/pages/how-it-helps