Facebook Docked Video

Screenshots powered by

GetScreenshot Screenshot API

✋ What is it?

This is a solution that Facebook uses on their video feed experiences. When users are watching a video from their feed, they can pin that video and keep it visible while they continue scrolling down.

🤲 How does this interaction or solution work?

When users are watching a video that showed up on their newsfeed, they can hover over the video to reveal the play bar and a strip of actionable buttons.

One of these buttons is an icon that resembles the final state of this solution. When hovering over the button, a tooltip with the text "Continue watching while you use Facebook" shows up.

Both, the icon and the helper text, are cues used to explain the interaction behind this solution.

These cues are crucial when introducing new solutions since they help users to establish mental models around the framed functionality.

Upon clicking the button, a small video player fades-in and gets docked at the top right of the screen. One important detail to note here is that the new player will resume at the time at which the news feed player stops. Without this continuity the context would be lost, and the solution wouldn't be beneficial for the user.

When the user scrolls, the video stays fixed at the top-right corner (following you as you scroll).

There are some instances in which this interaction would get triggered automatically upon scrolling. The most notorious one is when the user un-mutes the video (Facebook assumes that there's engagement with the video). Once you scroll after un-muting, the video gets pinned automatically.

🙌 How does this interaction or solution work?


The helpfulness of this solution from the user's perspective is debatable. Facebook is well known to exploit different mechanisms to drive engagement up. It's undeniable that this model can drive video engagement up and that would ultimately benefit Facebook's business.

However, this solution is potentially helpful for users who want to multitask or that have developed multi-screen behaviors (like using a phone while watching TV).

From a usability point of view, we could also argue that this solution helps the user to develop new content discovery mental models that rely on a combination of constant visibility and progressive content disclosure.

That's it! If you like the content, consider subscribing to Waveguide Next, a newsletter / blog where I share new examples and lessons on User Experience.