Skip to content

Show story videos up front in Story Share carousels and story pages - #2789

Open
maebeale wants to merge 7 commits into
mainfrom
maebeale/video-in-carousel
Open

maebeale wants to merge 7 commits into
mainfrom
maebeale/video-in-carousel

Conversation

@maebeale

@maebeale maebeale commented Oct 23, 2026 •

Copy link
Copy Markdown
Collaborator

🤖 suggested review level: 3 Read 📖 view changes, a helper refactor, and a small carousel JS hook; no data changes

Stories with a YouTube link now show their video up front: muted and looping in place of the photo in the Story Share home and browse carousels, and as the first slide of the carousel at the top of the story itself.

  • Where — home featured carousel and browse lead carousel only.
    • Browse cards and the single-topic hero keep the photo + play badge.
  • Click-through player — pointer-events-none iframe.
    • Slide still links to the story page, where the video plays with sound.
    • Swiping and carousel autoplay keep working.
  • Cropping — a fixed zoom (STORY_BANNER_VIDEO_SCALE) makes the 16:9 video cover the banner box (4:3 mobile, 2:1 desktop).
    • Tied to STORY_BANNER_ASPECT; change both together.
  • Fallback — no URL, or a link with no video id (e.g. a channel link) → the photo, as before.
  • Helper — extracted youtube_video_id.
    • New embed URL builder URL-encodes the id, so a crafted link can't add its own player params.
  • Story pages — public (story_shares#show) and admin (stories#show).
    • The video is the first slide of the image carousel, with full player controls and sound.
    • It replaces the separate embed below the story text.
    • Video-only stories get a single-slide carousel.
    • Moving to another slide pauses the video (carousel_controller.js → YouTube pauseVideo, needs enablejsapi=1).
  • Dev seeds — home-carousel sample stories now get photos; odd slides also get a video.
  • Trade-off — each video slide loads a YouTube player up front (not lazy), so it's playing by the time the slide comes around.

UI testing checklist

  • Home carousel: a video story loops muted, cropped edge to edge, with no black bars (desktop + mobile)
  • Clicking the video slide opens the story
  • Swiping and arrows still move past a video slide
  • Browse (e.g. search) carousel: same; browse cards still show the play badge
  • Story page: video is the first slide, then images; no second embed below the text
  • Story page: play the video, click next — it pauses
  • Story without a video: unchanged

Headless Chrome won't paint YouTube frames, so playback needs a manual look in dev or staging.

🤖 Generated with Claude Code

@maebeale maebeale changed the title Play story videos in the story share carousels Play story videos in the Story Share carousels Oct 23, 2026
@maebeale
maebeale force-pushed the maebeale/video-in-carousel branch 3 times, most recently from b7961ef to 196710c Compare October 23, 2026 11:29
@maebeale
maebeale requested review from jmilljr24 and a balanced review from Copilot and removed request for Copilot October 23, 2026 11:34
@maebeale maebeale changed the title Play story videos in the Story Share carousels JM: Play story videos in the Story Share carousels Oct 23, 2026
@maebeale maebeale changed the title JM: Play story videos in the Story Share carousels Show story videos up front in Story Share carousels and story pages Oct 23, 2026
@maebeale
maebeale marked this pull request as ready for review October 23, 2026 11:37

@jmilljr24 jmilljr24 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you confirm with the stakeholders that muted video works for them?

maebeale and others added 7 commits October 23, 2026 11:17
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
A story's video says more than its photo, so the home and browse
carousels now loop it muted in the photo's place. The player is
decorative and click-through, so the slide still links to the story
and swiping keeps working.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Main now fills the browse grid only with stories starring the browsed
tag as primary, so the spec has to star it to land a card there.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
The hand-picked home carousel stories had neither, so the new video
slides couldn't be seen in dev. Odd slides get both; even slides stay
photo-only so the carousel mixes the two.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
The video sat below the story text, easy to miss. It now opens the
image carousel at the top of both the public and admin story pages.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Playing the video and then flipping to an image left the sound running
off-screen. The carousel now tells YouTube to pause on every slide change.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Story Share search now lists results without a carousel, so the spec
browses an audience whose stories star it as primary.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@maebeale
maebeale force-pushed the maebeale/video-in-carousel branch from e86e84d to 476a429 Compare October 23, 2026 15:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants