Handle Vimeo embed privacy for non-embeddable clips

O3r and future imports with embed_privacy=nowhere show a poster
link to Vimeo instead of a blocked iframe player.

client/src/pages/ProjectPage.scss

@@ -60,12 +60,14 @@
     border-radius: var(--radius);
     overflow: hidden;
     border: 1px solid var(--border);
+    position: relative;
 
     iframe,
     video {
       width: 100%;
       height: 100%;
       border: 0;
+      display: block;
     }
 
     p {
@@ -77,6 +79,74 @@
     }
   }
 
+  &__video-link {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    color: #fff;
+    text-decoration: none;
+  }
+
+  &__video-poster {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    opacity: 0.85;
+    transition: opacity 0.2s;
+
+    &--empty {
+      background: linear-gradient(145deg, #141416, #0c0c0e);
+    }
+
+    .project-page__video-link:hover & {
+      opacity: 1;
+    }
+  }
+
+  &__video-cta {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.65rem;
+    font-weight: 500;
+    font-size: 1rem;
+    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
+    background: rgba(0, 0, 0, 0.25);
+    transition: background 0.2s;
+    padding: 1rem;
+    text-align: center;
+
+    .project-page__video-link:hover & {
+      background: rgba(0, 0, 0, 0.4);
+    }
+  }
+
+  &__play {
+    display: grid;
+    place-items: center;
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    background: var(--accent);
+    color: #0a0a0b;
+    font-size: 1.1rem;
+    padding-left: 3px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  }
+
+  &__video-note {
+    font-size: 0.75rem;
+    font-weight: 400;
+    color: rgba(255, 255, 255, 0.75);
+    max-width: 22rem;
+    line-height: 1.35;
+  }
+
   &__gallery {
     display: grid;
     grid-template-columns: 1fr;

client/src/pages/ProjectPage.tsx

@@ -60,6 +60,10 @@ export function ProjectPage() {
   const images = (project.media || []).filter((m) => m.type === "image");
   const videos = (project.media || []).filter((m) => m.type === "video");
   const slides = images.map((m) => ({ src: mediaSrc(m.url) }));
+  const poster =
+    mediaSrc(project.thumbnail?.thumbnailUrl || project.thumbnail?.url) ||
+    mediaSrc(images[0]?.thumbnailUrl || images[0]?.url) ||
+    "";
 
   return (
     <article className="project-page page-enter">
@@ -96,25 +100,59 @@ export function ProjectPage() {
 
         {videos.length > 0 && (
           <div className="project-page__videos">
-            {videos.map((v) => (
-              <div key={v.id} className="project-page__video">
-                {v.videoSource === "youtube" || v.videoSource === "vimeo" ? (
-                  <iframe
-                    src={mediaSrc(v.url)}
-                    title={v.caption || project.title}
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                    allowFullScreen
-                  />
-                ) : v.videoSource === "self_hosted" ? (
-                  <video src={mediaSrc(v.url)} controls playsInline />
-                ) : (
-                  <a href={v.externalUrl || v.url} target="_blank" rel="noreferrer" className="btn btn--ghost">
-                    Watch video ↗
-                  </a>
-                )}
-                {v.caption && <p>{v.caption}</p>}
-              </div>
-            ))}
+            {videos.map((v) => {
+              const watchUrl = v.externalUrl || v.url;
+              // Vimeo "nowhere" privacy stores watch-page URL (no player.vimeo.com) → link card
+              const showEmbed =
+                v.videoSource === "youtube" ||
+                (v.videoSource === "vimeo" && v.url.includes("player.vimeo.com"));
+
+              return (
+                <div key={v.id} className="project-page__video">
+                  {showEmbed ? (
+                    <iframe
+                      src={mediaSrc(v.url)}
+                      title={v.caption || project.title}
+                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                      allowFullScreen
+                      referrerPolicy="strict-origin-when-cross-origin"
+                    />
+                  ) : v.videoSource === "self_hosted" ? (
+                    <video src={mediaSrc(v.url)} controls playsInline poster={poster || undefined} />
+                  ) : (
+                    <a
+                      href={watchUrl}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="project-page__video-link"
+                    >
+                      {poster ? (
+                        <img src={poster} alt="" className="project-page__video-poster" />
+                      ) : (
+                        <div className="project-page__video-poster project-page__video-poster--empty" />
+                      )}
+                      <span className="project-page__video-cta">
+                        <span className="project-page__play" aria-hidden>
+                          ▶
+                        </span>
+                        Watch on {v.videoSource === "vimeo" || watchUrl.includes("vimeo.com")
+                          ? "Vimeo"
+                          : v.videoSource === "youtube" || watchUrl.includes("youtu")
+                            ? "YouTube"
+                            : "external site"}{" "}
+                        ↗
+                      </span>
+                      {(v.videoSource === "vimeo" || watchUrl.includes("vimeo.com")) && (
+                        <span className="project-page__video-note">
+                          This clip’s Vimeo privacy settings block on-site embedding
+                        </span>
+                      )}
+                    </a>
+                  )}
+                  {v.caption && <p>{v.caption}</p>}
+                </div>
+              );
+            })}
           </div>
         )}