<div class="non-autoplay-gifv" style="width: {width}px; height: {height}px;" on:mouseover="onMouseOver(event)" ref:node > {#if playing} <AutoplayVideo className={class} ariaLabel={label} {poster} {src} {width} {height} /> {:else} <LazyImage alt={label || ''} title={label || ''} src={staticSrc} fallback={oneTransparentPixel} {width} {height} background="var(--loading-bg)" className={class} /> {/if} <PlayVideoIcon className={playing ? 'hidden' : ''}/> </div> <style> .non-autoplay-gifv { cursor: zoom-in; position: relative; } :global(.non-autoplay-gifv .play-video-icon) { transition: opacity 0.2s linear; } </style> <script> import { mouseover } from '../_utils/events' import PlayVideoIcon from './PlayVideoIcon.html' import { ONE_TRANSPARENT_PIXEL } from '../_static/media' import LazyImage from './LazyImage.html' import AutoplayVideo from './AutoplayVideo.html' export default { methods: { onMouseOver (mouseOver) { this.set({playing: mouseOver}) } }, events: { mouseover }, data: () => ({ oneTransparentPixel: ONE_TRANSPARENT_PIXEL }), components: { PlayVideoIcon, LazyImage, AutoplayVideo } } </script>