pinafore/routes/_components/NonAutoplayGifv.html

<div class="non-autoplay-gifv" style="width: {{width}}px; height: {{height}}px;"
     on:mouseover="onMouseOver(event)"
     ref:node
>
  {{#if playing}}
    <video
      style="background: url({{staticSrc}});"
      class="{{class}}"
      aria-label="{{label}}"
      poster="{{poster}}"
      src="{{src}}"
      width="{{width}}"
      height="{{height}}"
      autoplay
      muted
      loop
      playsinline
      />
  {{else}}
    <img class="{{class}}"
         alt="{{label}}"
         src="{{staticSrc}}"
         width="{{width}}"
         height="{{height}}"
         />
  {{/if}}
</div>
<style>
  .non-autoplay-gifv {
    cursor: zoom-in;
  }
</style>
<script>
  import { mouseover } from '../_utils/events'
  export default {
    methods: {
      onMouseOver(mouseOver) {
        this.set({playing: mouseOver})
      }
    },
    events: {
      mouseover
    }
  }
</script>