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 && ( + + )} {`${video.title} 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