The hidden vimeo video player thingy

Couldn’t figure out a neat name for this odd UI element.

So this is what we’re going to talk about:

Video playing state (as seen on pattern.is)
Hover state and paused state

What you’re looking at is an embedded Vimeo video player that has settings enabled by the user to make the embed look like this.

What it shows:

  • Play / pause controls
  • Video progress bar
  • Video buffer progress

What user can interact with:

  • Play and pause the video
  • When leaving the Video player with the cursor, the element disappears

Why I don’t like it:

The lack of interaction is why I don’t like this element. Because a user can only see a progress bar that doesn’t show time, the user doesn’t know how long the video they’re watching even is! It could be 10 minutes or 10 seconds. Especially on longer videos the progress bar is hard to judge since it’s so tiny it would move very slowly.

The element also (slighly) blocks the view of the video. You can assume a video will have it’s subject in the center and therefore it’s not a good idea to put the controls in that position in my opinion. Centering the element does make it stand out, but surely that can’t be the focus when you’re dealing with a user attempting to watch a video.


Do you like this format? Should I do more? Please let me know in the comments or on Twitter.