<template id="reduced-motion-picture-template">
  <style>
    .picture-wrap {
      position: relative;
    }
    .picture-wrap .animate-button {
      position: absolute;
      top: 10px;
      left: 10px;
      display: none;
      z-index: 2000;
    }
    @media (prefers-reduced-motion: reduce) {
      .picture-wrap .animate-button {
        display: block;
      }
    }
  </style>
  <figure class="picture-wrap">
    <slot name="picture"></slot>
    <button class="animate-button">Animate</button>
  </figure>
</template>

<reduced-motion-picture>
    <picture slot="picture">
      
      <source srcset="https://csstricks-images.s3.amazonaws.com/board.png" media="(prefers-reduced-motion: reduce)"></source>

      <source type="video/mp4" srcset="https://csstricks-images.s3.amazonaws.com/board.mp4">

      <img srcset="https://csstricks-images.s3.amazonaws.com/board.gif" alt="brick wall" />
  
  </picture>
</reduced-motion-picture>

<reduced-motion-picture>
    <picture slot="picture">
      
      <source srcset="https://csstricks-images.s3.amazonaws.com/board.png" media="(prefers-reduced-motion: reduce)"></source>

      <source type="video/mp4" srcset="https://csstricks-images.s3.amazonaws.com/board.mp4">

      <img srcset="https://csstricks-images.s3.amazonaws.com/board.gif" alt="brick wall" />
  
  </picture>
</reduced-motion-picture>

body {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
img {
  max-width: 100%;
}

class ReducedMotionPicture extends HTMLElement {

  constructor() {
    super();
    const template = document
      .getElementById('reduced-motion-picture-template')
      .content;
    const shadowRoot = this.attachShadow({mode: 'open'})
      .appendChild(template.cloneNode(true));
        
    let button = this.shadowRoot.querySelector(".animate-button");
    
    button.addEventListener("click", () => {
      const picture = this.querySelector("picture");
      picture.querySelector("source[media]").remove();
    });
  }
}
    
customElements.define('reduced-motion-picture', ReducedMotionPicture);