Logo of UI Challenges
Sign in

Gallery

See what others have created

Picture-in-Picture Floating Player
D

designsbysathya

@designsbysathya

MediumSystem

Picture-in-Picture Floating Player

Design the floating Picture-in-Picture video window for mobile, shown on top of other apps. It should feel like a system surface, not part of the underlying app.

The player needs to support dragging, resizing, and a few inline controls without turning into a full video UI. Keep the video visible and the chrome light.

The close affordance matters because this surface lives across contexts. It should be easy to find, but not compete with playback or movement.

Think about how the window behaves as it snaps near screen edges, changes size, and sits over different app backgrounds. The surface has to stay legible and controllable in all of them.

What to deliver

  • Design the default PiP floating state.
  • Design the resize interaction and one resized state.
  • Design the minimal control set inside the window.
  • Design the close affordance and dismissal state.
  • Show how the player behaves near screen edges.

Make the drag handle and close control distinct in shape and placement so users can move the window without accidentally dismissing it.