Recreating Ambient Mode from Youtube Videos

Briefly About Ambient Mode

In October 2022, YouTube introduced Ambient Mode, an immersive feature that enhances the viewing experience by extending the video's colors into the interface background. This effect, available exclusively in Dark Mode, reduces eye strain and adds a cinematic touch to video playback.

In this blog, we'll create a dynamic ambient mode similar to YouTube's Ambient Mode.

Step by Step Guide

It's essentially two different stacked videos playing in sync with effects.

First, wrap two video elements within a div.container. Here, we'll use the first video element for the ambient mode and the second as our main video. Ensure you mute and remove the controls of the ambient video element.

Next, set the container's position to relative and the second video's position to absolute, positioning the main video over the ambient one.

At this stage, your setup should look similar to the picture above.

Now, scale up the ambient mode video element so it expands and becomes visible.

Add some blur to the ambient mode video element.

Finally, reduce the opacity of the ambient mode video element to enhance the effect.

If you want to create a dynamic ambient mode that syncs with the main video, you can achieve this using JavaScript. Configure actions so that the main video's controls also affect the ambient mode video.

Thanks for following along! I hope you found this guide helpful and easy to understand.

Youtube blog: Open (Watch YouTube in ambient mode)

Demo Site: Youtube-ambient-mode

Source Code: Github