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.
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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) => (
|
||||
{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">
|
||||
{v.videoSource === "youtube" || v.videoSource === "vimeo" ? (
|
||||
{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 />
|
||||
<video src={mediaSrc(v.url)} controls playsInline poster={poster || undefined} />
|
||||
) : (
|
||||
<a href={v.externalUrl || v.url} target="_blank" rel="noreferrer" className="btn btn--ghost">
|
||||
Watch video ↗
|
||||
<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>
|
||||
)}
|
||||
|
||||
|
||||
@@ -87,6 +87,8 @@ interface VimeoSimpleVideo {
|
||||
tags?: string;
|
||||
width?: number;
|
||||
height?: number;
|
||||
/** anywhere | nowhere | whitelist — "nowhere" blocks iframe embeds */
|
||||
embed_privacy?: string;
|
||||
}
|
||||
|
||||
async function listVideos(username: string): Promise<VimeoSimpleVideo[]> {
|
||||
@@ -271,21 +273,38 @@ export async function runVimeoImport(
|
||||
}
|
||||
}
|
||||
|
||||
// Vimeo embed media
|
||||
// Embed only when Vimeo allows it (embed_privacy: anywhere / whitelist)
|
||||
const canEmbed =
|
||||
!video.embed_privacy ||
|
||||
video.embed_privacy === "anywhere" ||
|
||||
video.embed_privacy === "whitelist";
|
||||
|
||||
await prisma.media.create({
|
||||
data: {
|
||||
projectId: project.id,
|
||||
type: "video",
|
||||
url: `https://player.vimeo.com/video/${video.id}`,
|
||||
// Non-embeddable clips use the watch page URL (no player.vimeo.com iframe)
|
||||
url: canEmbed
|
||||
? `https://player.vimeo.com/video/${video.id}`
|
||||
: sourceUrl,
|
||||
externalUrl: sourceUrl,
|
||||
videoSource: "vimeo",
|
||||
videoId: String(video.id),
|
||||
caption: title,
|
||||
caption: canEmbed
|
||||
? title
|
||||
: `${title} (opens on Vimeo — embedding disabled by privacy settings)`,
|
||||
sortOrder: 1,
|
||||
width: video.width,
|
||||
height: video.height,
|
||||
},
|
||||
});
|
||||
if (!canEmbed) {
|
||||
log(
|
||||
lines,
|
||||
onLog,
|
||||
` note: embed privacy “${video.embed_privacy}” — link-out card instead of iframe`
|
||||
);
|
||||
}
|
||||
|
||||
if (thumbnailId) {
|
||||
await prisma.project.update({
|
||||
|
||||
Reference in New Issue
Block a user