Nuestros videos tienen un botón SVG encima de una miniatura. Cuando se hace clic en PNG, el video se carga y se reproduce automáticamente. En algunas plataformas de navegador/sistema operativo, incluidas las actualizadas como Mac Monetrey y Chrome 101.xxx, al hacer clic en el SVG no se puede cargar/reproducir el video.

No hay errores en la consola... una actualización de página funciona de vez en cuando.

Aquí está el 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);

Y el enlace es...

 <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>

Sitio web con video de muestra: https://www.fisherwallace.com/pages/how-it-helps