Modern Media Without the Risk: Helping a newsroom adopt a new video platform safely

The Situation

Video is the first thing readers see

Our client runs the public newsroom for a global apparel brand. It is where the company tells its stories, and on a brand like this, the visuals carry the message. A reader landing on a feature meets a full-bleed hero video before they read a single word. 

When that video plays cleanly, the story feels alive and pushes the user down the page. But when it stalls or fails to load, the whole page feels broken. All momentum fades, and readers may click away.

The Trigger

A new media platform, with assets that were not always ready

The client built its own media platform: a custom system running on AWS, with a large S3-backed asset vault, extensive edge logic, and AI-assisted features for tagging and translation. It is genuinely modern, and the site was moving onto it to take advantage of those capabilities.

The platform processes each video after upload, and at the time it offered no signal to indicate when an optimized video was finished. The site inferred the optimized video's address and requested it. If the asset was still processing, that request came back as a 404. On the page, that meant a broken video player and a string of red console errors right when an editor was trying to publish, or a reader was arriving.

The Challenge

Adopt the modern features without ever showing a broken video

We wanted the site to use everything the new platform offered. We also could not let a reader see a broken hero video on a site where the visuals are the point. The obvious backend answer, polling the platform or waiting for it to add a completion signal, would have slowed the migration and tied the site's reliability to a system still settling in. The safer path had to live in the frontend, where we controlled what the reader actually saw.

Our Approach

A graceful fallback, built into the site itself

We built a small React hook inside the frontend that takes two sources for every video: the optimized version from the new platform, and the original upload as a backstop. The hook tries the optimized source first. If it returns an error, it falls back to the original without the reader ever noticing, and gives the rest of the interface a single, reliable address to work with. No backend polling, no dependency on a completion signal that did not exist yet, and nothing that blocked the migration.

The posture is the part worth drawing out. We were genuinely excited about the platform's video features and wanted them on the site. The responsible way to adopt them was to assume the platform would sometimes hand us an asset that was not ready, and to make that moment invisible to the reader rather than a broken page.

Implementation and Iteration

Wiring it through every place a video plays

The fallback only mattered if it reached every video on the site, so we updated the two shared video players to expose their load errors, then routed the new hook through each surface that plays video: the article heroes, the feature covers, the sliders, and the vertical video grids.

Testing then surfaced a separate, subtler problem on Safari, where a looping video stalled on its last frame and again on its first before restarting. It was a small jerk, but on an otherwise polished page it read as broken. We fixed that in the same pass, so looping video runs smoothly across browsers.

The Outcome

Reliable video, and a safe path onto the new platform

Readers now always see a working video. When the optimized version is ready, they get it. While it is still processing, they get the original, and the broken players and console errors are gone. On a site where a stalled hero can make the whole page feel down, that reliability is the difference between a story that lands and one that undercuts itself.

Just as important, the site could move to the new media platform with confidence. The team no longer had to wait for the platform to add a completion signal before adopting its video, because the frontend already handled the gap. What began as a way to prevent 404s became the pattern that made the rest of the integration safe to pursue.

The Second Act

Modern features, adopted on the site's own terms

The client's media platform keeps growing, with edge delivery and AI-assisted tagging and translation among the capabilities the newsroom wants to use. The fallback pattern is how the site takes them on without putting the reading experience at risk: reach for the new capability, and degrade gracefully to a known-good version whenever it is not ready yet. That is the throughline in how we treat an application that already matters. Bring in the modern tooling, and protect what already works while you do it.

If your team is bringing new tooling into a frontend that already works, we can help you do it without breaking what your users see. Talk to us.