Video Preview Card with Hover Autoplay

<article
  class="group relative overflow-hidden transition duration-500 ease-out motion-reduce:transition-none bg-gradient-to-b from-[#7E6ECA]/20 to-[#4F4FB8]/10 ring-white/10 ring-1 rounded-3xl shadow-[0_10px_40px_-10px_rgba(120,80,255,0.35)] blur-none translate-y-0 max-w-xl"
  style="">
  <div class="relative aspect-[4/3] group"
    onmouseenter="const v=this.querySelector('video'); if(v){v.play().catch(()=&gt;{});}"
    onmouseleave="const v=this.querySelector('video'); if(v){v.pause(); v.currentTime=0;}">
    <img src="https://cdn.midjourney.com/1fd8c9b3-471e-47d7-b085-99b79896f990/0_0.png?w=800&amp;q=80" alt="Abstract 3D blocks" class="h-full w-full object-cover transition duration-300 ease-out group-hover:opacity-0">
    <video src="https://cdn.midjourney.com/video/63a591d9-5b67-44ca-baa1-e6f0099ee298/0.mp4" muted="" playsinline=""
      loop="" preload="metadata"
      class="absolute inset-0 h-full w-full object-cover opacity-0 transition duration-300 ease-out group-hover:opacity-100"></video>
    <span class="absolute right-2 top-2 rounded-md bg-black/60 px-2 py-1 text-[11px] text-white">42:18</span>
    <div class="absolute inset-0 opacity-90 bg-gradient-to-t from-[#0B0B0F] via-transparent to-transparent"></div>
  </div>
  <div
    class="bg-[radial-gradient(circle_at_bottom,var(--tw-gradient-stops))] from-[#3e3097]/50 to-slate-800/0 pt-4 pr-4 pb-4 pl-4">
    <h3 class="line-clamp-2 text-[15px] leading-snug font-semibold text-white tracking-tight">
      Reframing Creativity: Systems for Digital Craft
    </h3>
    <p class="mt-2 text-[12px] text-slate-300">27k views — 2 months ago</p>
    <div class="mt-3 flex items-center justify-between">
      <button class="rounded-full p-1 text-slate-300 hover:text-slate-100 transition duration-200 ease-out motion-reduce:transition-none active:scale-95 motion-reduce:transform-none" aria-pressed="false">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="heart" class="lucide lucide-heart h-4 w-4"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5" class=""></path></svg>
      </button>
      <button class="rounded-full p-1 text-slate-300 hover:text-slate-100 transition duration-200 ease-out motion-reduce:transition-none active:scale-95 motion-reduce:transform-none" aria-haspopup="menu" aria-expanded="false">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="more-horizontal" class="lucide lucide-more-horizontal h-4 w-4"><circle cx="12" cy="12" r="1" class=""></circle><circle cx="19" cy="12" r="1" class=""></circle><circle cx="5" cy="12" r="1" class=""></circle></svg>
      </button>
    </div>
  </div>
</article>