jmartin/jmartgraphix.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Handle Vimeo embed privacy for non-embeddable clips

Browse Source 
O3r and future imports with embed_privacy=nowhere show a poster
link to Vimeo instead of a blocked iframe player.
This commit is contained in:
jmartin
2026-07-24 12:21:03 -04:00
parent b924ca8a62
commit 1b29b1d104
3 changed files with 149 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/pages/ProjectPage.scss
+70
View File
@@ -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
+57 -19
View File
@@ -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>
)}