UI/UX Design: YouTube’s New Ambient Mode | by Nick Lawrence | Oct, 2022

This brand new mode that YouTube has for watching videos is way cooler than it has any right to be.

With all the changes that occur on a day-to-day basis within major product ecosystems, it’s easy for things to get lost in the shuffle.

That said, every once in a while an innovation comes around that, while not necessarily groundbreaking, enhances UX in an unexpected way.

Today, we’re going over YouTube’s new Ambient Mode, how it works, and why it’s a solid addition to YT’s overall UI.

Not everyone has seen this new ambient mode, and that’s because you actually have to be watching YT in dark mode in order to see it.

Essentially, the videos themselves are fundamentally the same, but the difference is the subtle changes made to the space around the video’s container, wherein ambient colors from the video are applied to the UI.

You can see what I’m talking about in the screenshot above.

How to enable it

Enabling this mode is relatively simple, and you can follow the steps here:

or here (Desktop, iOS, Android text version):

To make it happen.

This new feature slaps harder than my mom seasoning a roast, but why? Why does it feel so satisfying when the effect is honestly super minimal?

Let’s take a closer look.

The implementation is inexpensive

Captured mid-load, its easy to see what’s going on here, and if you’ve been in design for any length of time, you can probably already guess how they’re doing this.

Essentially, it’s just a copy of the video, using a blur filter, with the opacity taken down to about 60%.

As applied, the core effect is pretty simple to implement.

The changes are unobtrusive

While the changes are definitely noticeable, I didn’t actually see it until I was watching a brighter video. This feature was added without consulting me first, but because its so unobtrusive, I didn’t mind.

The output adds depth

I never would have thought to ask for a feature like this, but it does add a certain amount of depth to the UI that it just didn’t have before.

What’s nice is that, because its just a copy of the above video, the logic to get this type of effect to run is relatively minimal compared to some of the other web-based UI effects that I’ve seen.

Its device and performance sensitive

What I really like about this effect is that it appears to be running on the desktop version of YT as an initial rollout, but doesn’t run by default on iOS or Android.

I checked the mobile dark version of YT and, interestingly, it does look like it’s available there if you’re already in dark mode.

What this means is that considerations were made to and for performance so that no one took a noticeable hit on rollout.

It conforms to MAYA

Lastly, it conforms to the MAYA principle with a high degree of focus. It’s not too much, the changes don’t represent a major departure from platform paradigms, yet it adds a degree of advancement that one would reasonably expect from YouTube.

By leveraging a relatively simple web effect, Google’s designers and developers have achieved a presentation that is definitely more advanced than it was before, but acceptable to their users.

So what does all of this mean for you?

• Essentially, YouTube has a new ambient mode which can be toggled on and off in your account settings.
• This new mode represents a simple effect leveraged to create depth in their UI.
• If you want to recreate the effect yourself, make a copy of any layer you have on a dark background, blur the layer by about 300px, and then drop the opacity to about 60%. Done.
• It’s worth studying the rollout on this feature because while it was done without the express consent of most users on desktop, the changes were subtle enough that it doesn’t obstruct usage or negatively affect the viewing experience.