Responsive Video Player with Thumbnails & Chat Sidebar

<div class="mt-10 relative z-20 max-w-5xl">
    <div class="ring-1 ring-zinc-800 bg-[radial-gradient(circle_at_top,var(--tw-gradient-stops))] from-slate-200/20 to-[#131418] rounded-3xl pt-5 pr-5 pb-5 pl-5 shadow-sm backdrop-blur-lg" style="">
      <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
        <!-- Left rail -->
        <aside class="order-2 lg:order-1 lg:col-span-2">
          <div class="space-y-3">
            <button class="w-full overflow-hidden rounded-xl ring-1 ring-zinc-800 hover:ring-zinc-700" style="">
              <img class="h-20 w-full object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/2193eef4-d7c7-4b14-80c0-08ed6035c6da_800w.jpg" alt="VR clip">
            </button>
            <button class="w-full overflow-hidden rounded-xl ring-1 ring-zinc-800 hover:ring-zinc-700" style="">
              <img class="h-20 w-full object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/656c6265-9358-4849-8674-c7dd07300ba3_800w.jpg" alt="coding">
            </button>
            <button class="w-full overflow-hidden rounded-xl ring-1 ring-zinc-800 hover:ring-zinc-700" style="">
              <img class="h-20 w-full object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/28c4d0fd-707a-47de-a843-f7c73fa1d693_800w.jpg" alt="workspace">
            </button>
            <button class="w-full overflow-hidden rounded-xl ring-1 ring-zinc-800 hover:ring-zinc-700" style="">
              <img class="h-20 w-full object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a7eacbd6-2566-476b-9e41-eebb713e56c1_800w.jpg" alt="nebula">
            </button>
          </div>
        </aside>

        <!-- Main video -->
        <main class="order-1 lg:order-2 lg:col-span-7">
          <div class="relative overflow-hidden rounded-2xl ring-1 ring-zinc-800" style="">
            <video data-inline-player="" playsinline="" controls="" autoplay="" class="aspect-video w-full object-cover" src="https://cdn.midjourney.com/video/ce0968ea-78ec-47f9-b972-80efa98ef4a6/0.mp4" poster="https://cdn.midjourney.com/3b78d621-e353-44d0-8275-e07dc8e723e3/0_1.png?w=800&amp;q=80"></video>
            <button class="absolute inset-0 h-14 w-14 flex hover:bg-black bg-black/90 rounded-full mt-auto mr-auto mb-auto ml-auto shadow-md backdrop-blur items-center justify-center" type="button" aria-label="Play video" data-video-src="https://cdn.midjourney.com/video/ce0968ea-78ec-47f9-b972-80efa98ef4a6/0.mp4" onclick="(function(btn){try{const container=btn.closest('div.relative');if(!container)return;const img=container.querySelector('img.aspect-video');let video=container.querySelector('video[data-inline-player]');if(!video){video=document.createElement('video');video.setAttribute('data-inline-player','');video.setAttribute('playsinline','');video.setAttribute('controls','');video.setAttribute('autoplay','');video.muted=true;video.className=img?img.className:'aspect-video w-full object-cover';video.src=btn.getAttribute('data-video-src');if(img){video.poster=img.currentSrc||img.src;img.replaceWith(video);}else{container.prepend(video);}}const p=video.play();if(p&amp;&amp;p.catch){p.catch(function(){video.muted=true;video.play();});}btn.style.display='none';}catch(e){console.error(e);}})(this)" style="display: none;">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="play" class="lucide lucide-play h-6 w-6 text-zinc-100" style=""><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg>
</button>
          </div>
          <div class="flex mt-3 items-center justify-between">
            <div class="">
              <h3 class="text-lg tracking-tight font-semibold">Exploring Spatial Video</h3>
              <p class="text-sm text-zinc-400" style="">by <span class="font-medium text-zinc-200" style="">Ari Nova</span> • 8:21</p>
            </div>
            <div class="flex items-center gap-2">
              <button class="inline-flex gap-1.5 hover:bg-zinc-800 text-xs font-medium text-zinc-200 bg-zinc-950 rounded-lg pt-1.5 pr-3 pb-1.5 pl-3 items-center" style="">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="thumbs-up" class="lucide lucide-thumbs-up h-3.5 w-3.5"><path d="M7 10v12"></path><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"></path></svg>
                4.2k
              </button>
              <button class="inline-flex gap-1.5 hover:bg-zinc-800 text-xs font-medium text-zinc-200 bg-zinc-950 rounded-lg pt-1.5 pr-3 pb-1.5 pl-3 items-center" style="">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="bookmark" class="lucide lucide-bookmark h-3.5 w-3.5"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"></path></svg>
                Save
              </button>
            </div>
          </div>
        </main>

        <!-- Right rail: comments -->
        <aside class="order-3 lg:col-span-3">
          <div class="flex items-center justify-between mb-2">
            <h4 class="text-sm font-medium tracking-tight">Activity</h4>
            <button class="rounded-lg px-2.5 py-1.5 text-xs font-medium bg-zinc-900 hover:bg-zinc-800" style="">Live</button>
          </div>
          <div class="space-y-3 max-h-120 overflow-y-auto pr-1">
            <div class="flex gap-3">
              <img class="h-9 w-9 rounded-full object-cover ring-1 ring-zinc-800" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/05b8d217-cbbf-409b-a1ff-f4515ea6aab3_320w.jpg" alt="avatar" style="">
              <div class="flex-1">
                <p class="text-sm"><span class="font-medium">Lena</span> This edit is wild!</p>
                <p class="text-xs text-zinc-500" style="">2m</p>
              </div>
            </div>
            <div class="flex gap-3">
              <img class="h-9 w-9 rounded-full object-cover ring-1 ring-zinc-800" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/6e7842fa-2930-4398-a1b1-829010b57b42_320w.jpg" alt="avatar" style="">
              <div class="flex-1">
                <p class="text-sm"><span class="font-medium">Marco</span> Subscribed. More like this please.</p>
                <p class="text-xs text-zinc-500" style="">7m</p>
              </div>
            </div>
            <div class="flex gap-3">
              <img class="h-9 w-9 rounded-full object-cover ring-1 ring-zinc-800" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a923c29b-fee0-4c67-9737-34ddbce2dc31_320w.jpg" alt="avatar" style="">
              <div class="flex-1">
                <p class="text-sm"><span class="font-medium">Yui</span> The depth looks amazing.</p>
                <p class="text-xs text-zinc-500" style="">15m</p>
              </div>
            </div>
            <div class="flex gap-3">
              <img class="h-9 w-9 rounded-full object-cover ring-1 ring-zinc-800" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/2893445e-5489-4dcc-b2ce-184eea0a9e95_320w.jpg" alt="avatar" style="">
              <div class="flex-1">
                <p class="text-sm"><span class="font-medium">Alex</span> Great cinematography techniques here!</p>
                <p class="text-xs text-zinc-500" style="">18m</p>
              </div>
            </div>
            <div class="flex gap-3">
              <img class="h-9 w-9 rounded-full object-cover ring-1 ring-zinc-800" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/5d61e53b-2050-4b51-93a5-176f90ba5abd_320w.jpg" alt="avatar" style="">
              <div class="flex-1">
                <p class="text-sm"><span class="font-medium">Sarah</span> Just shared this with my team.</p>
                <p class="text-xs text-zinc-500" style="">22m</p>
              </div>
            </div>
            <div class="flex gap-3">
              <img class="h-9 w-9 rounded-full object-cover ring-1 ring-zinc-800" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/f52b9e1e-c3e8-4844-b3c5-28aacdc6b434_320w.jpg" alt="avatar" style="">
              <div class="flex-1">
                <p class="text-sm"><span class="font-medium">Jake</span> Can you do a tutorial on this setup?</p>
                <p class="text-xs text-zinc-500" style="">25m</p>
              </div>
            </div>
          </div>
        </aside>
      </div>
    </div>
  </div>