diff --git a/website/app/globals.css b/website/app/globals.css
index 111c110..50fb205 100644
--- a/website/app/globals.css
+++ b/website/app/globals.css
@@ -255,6 +255,21 @@ kbd {
display: block;
}
+/* Vertical (9:16) videos in the 16:9 frame: blurred fill behind, the full
+ still centered on top. */
+.showcase-card-video-vertical {
+ overflow: hidden;
+}
+
+.showcase-card-video img.showcase-thumb-backdrop {
+ filter: blur(18px) brightness(0.55);
+ transform: scale(1.15);
+}
+
+.showcase-card-video img.showcase-thumb-vertical {
+ object-fit: contain;
+}
+
.showcase-play-icon {
align-items: center;
background: rgba(0, 0, 0, 0.72);
diff --git a/website/components/Videos.jsx b/website/components/Videos.jsx
index 3a6afc9..75b2278 100644
--- a/website/components/Videos.jsx
+++ b/website/components/Videos.jsx
@@ -16,17 +16,38 @@ function extractYouTubeId(url) {
return null;
}
+// YouTube entries derive their thumbnail from the video id; other platforms
+// (e.g. Instagram reels) have no public thumbnail URL, so the entry carries a
+// `thumbnail` path to a still committed under public/videos/.
+function thumbnailFor(video) {
+ return video.thumbnail ?? `https://img.youtube.com/vi/${video.id}/mqdefault.jpg`;
+}
+
const videoGrid = videos.map((video) => (
-
+
+ {/* Vertical videos keep the grid's 16:9 frame: the still is shown
+ whole in the middle over a blurred copy of itself. */}
+ {video.vertical && (
+
+ )}
diff --git a/website/content/videos/videos.json b/website/content/videos/videos.json
index d98761a..6c195d8 100644
--- a/website/content/videos/videos.json
+++ b/website/content/videos/videos.json
@@ -1,4 +1,24 @@
[
+ {
+ "id": "rsW7TsaGWhs",
+ "title": "紀見峠ヒルクライム|登りながら、ちょっと雑談。🚴⛰️",
+ "author": "kashinobu",
+ "url": "https://www.youtube.com/watch?v=rsW7TsaGWhs"
+ },
+ {
+ "id": "DazZu_GCFzW",
+ "title": "Death Ride — Monitor Pass descent to Topaz Lake",
+ "author": "gradient_projects",
+ "url": "https://www.instagram.com/reel/DazZu_GCFzW/",
+ "thumbnail": "/videos/DazZu_GCFzW.jpg",
+ "vertical": true
+ },
+ {
+ "id": "TBrBElTWGKk",
+ "title": "Cycling POV | Veleia Romana Climb. Power, Gradient & 2,000 Years of History",
+ "author": "Paolo Tagliaferri",
+ "url": "https://www.youtube.com/watch?v=TBrBElTWGKk"
+ },
{
"id": "JmavtEU6Vvo",
"title": "Testing Cyclemetry",
@@ -22,11 +42,5 @@
"title": "Seward Park Crit",
"author": "Walker Sutton",
"url": "https://www.youtube.com/watch?v=gKugPA0xGhw"
- },
- {
- "id": "TBrBElTWGKk",
- "title": "Cycling POV | Veleia Romana Climb. Power, Gradient & 2,000 Years of History",
- "author": "Paolo Tagliaferri",
- "url": "https://www.youtube.com/watch?v=TBrBElTWGKk"
}
]
diff --git a/website/public/videos/DazZu_GCFzW.jpg b/website/public/videos/DazZu_GCFzW.jpg
new file mode 100644
index 0000000..e622dc2
Binary files /dev/null and b/website/public/videos/DazZu_GCFzW.jpg differ