Skip to content

Fade out the advertiser logo on playing a hosted video#15829

Merged
i-hardy merged 9 commits into
mainfrom
ih/hosted-video-icon-fade
May 13, 2026
Merged

Fade out the advertiser logo on playing a hosted video#15829
i-hardy merged 9 commits into
mainfrom
ih/hosted-video-icon-fade

Conversation

@i-hardy
Copy link
Copy Markdown
Contributor

@i-hardy i-hardy commented May 8, 2026

What does this change?

This fades out the brand logo in the header when a hosted video is played (and fades it back in on pause), below the wide breakpoint where the logo overlays the video.

Why?

This is a feature of the hosted video pages in frontend, as otherwise the logo blocks a portion of the playing video and this looks awkward.

Screenshots

video_logo_fade.mov

@i-hardy i-hardy force-pushed the ih/hosted-video-icon-fade branch from 6df82f3 to 9bff27c Compare May 8, 2026 11:42
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 8, 2026

@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 8, 2026

@i-hardy i-hardy force-pushed the ih/hosted-video-icon-fade branch 3 times, most recently from 9912b33 to 1cc1f1d Compare May 12, 2026 11:00
@i-hardy i-hardy force-pushed the ih/hosted-video-icon-fade branch from 1cc1f1d to d4d795b Compare May 12, 2026 13:40
@i-hardy i-hardy marked this pull request as ready for review May 12, 2026 13:56
@github-actions
Copy link
Copy Markdown

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

@i-hardy i-hardy added the feature Departmental tracking: work on a new feature label May 12, 2026
Copy link
Copy Markdown
Contributor

@cemms1 cemms1 left a comment

Choose a reason for hiding this comment

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

👏 very neat solution!

Comment thread dotcom-rendering/src/components/HostedContentHeader.island.tsx Outdated
Comment on lines +171 to +172
// Logo fading is an exclusive feature for hosted video pages at certain breakpoints
// This component only needs rehydration on the video layout
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

👌

@i-hardy i-hardy added the run_chromatic Runs chromatic when label is applied label May 13, 2026
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label May 13, 2026
Co-authored-by: Charlotte <43961396+cemms1@users.noreply.github.com>
@i-hardy i-hardy force-pushed the ih/hosted-video-icon-fade branch from f56a68d to 0dc4630 Compare May 13, 2026 09:51
@i-hardy i-hardy added the run_chromatic Runs chromatic when label is applied label May 13, 2026
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label May 13, 2026
@i-hardy i-hardy added the run_chromatic Runs chromatic when label is applied label May 13, 2026
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label May 13, 2026
@i-hardy i-hardy merged commit 54241cc into main May 13, 2026
35 checks passed
@i-hardy i-hardy deleted the ih/hosted-video-icon-fade branch May 13, 2026 10:10
@gu-prout
Copy link
Copy Markdown

gu-prout Bot commented May 13, 2026

Seen on PROD (merged by @i-hardy 15 minutes and 48 seconds ago) Please check your changes!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature Departmental tracking: work on a new feature Seen-on-PROD

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants