Shipfaster: UI Components

Video Player


Breadcrumbs are used when you have a large amount of content organised in hierarchical structure with defined categories (multiple sections that can be divided into more sub-sections). An excellent example is e-commerce site, in which a large variety of products is grouped into logical categories. They inform visitors of their current location in relation to the entire site hierarchy. Whereas they also improve the find-ability of site pages. The structure of the site is more easily understood because it is laid out in a breadcrumb.

A video player is an essential component of modern web and mobile applications, designed to play digital video content. It provides a user-friendly interface for accessing, controlling, and interacting with video media. They offer features like play/pause, volume control, and sometimes advanced functionalities like subtitle options and playback speed adjustment.

When to use

  • When your application or website contains video content that needs to be viewed by the user.
  • In cases where user engagement can be enhanced through visual media, such as tutorials, presentations, or entertainment.
  • When the content's value is best conveyed through a visual medium and offer a more immersive experience than static images or text.


Video player anatomy
  1. Live indicator: Signals that the video content is being streamed in real-time.
  2. Play/Pause button: Allows users to start or stop the video.
  3. Progress bar: Displays the video's current position and total length. Users can use it to navigate through the video.
  4. Playback control: Elements that allow users to manage and navigate through the video timeline.
  5. Volume control: Lets users adjust the audio level.
  6. Share and comment: Encouraging viewer engagement on doing actions for commenting and sharing a video content
  7. Full-screen option: Enables viewing the video in full-screen mode.
  8. Settings: May include options like playback speed, quality settings, and subtitle toggling.
  9. Views counter: Displays the number of active viewers currently watching the live video.

Best Practices

  • User control: Ensure that users have complete control over video playback, including pausing, skipping, and volume adjustment.
  • Responsive design: The video player should be responsive and adapt to different screen sizes and orientations.
  • Loading and buffering: Optimize for quick loading and smooth playback. Indicate buffering clearly to avoid user confusion.
  • Accessibility: Include features like subtitles and transcripts for users with hearing impairments and ensure the player is navigable via keyboard for those with motor impairments.
  • Minimalist design: Keep the design clean and unobtrusive, ensuring that the video content remains the focus.

Recommended resources

Get instant access to over 6,000 Figma Components with Shipfaster UI. A Figma UI Kit & Design system used by over 2,000 designers.

All Products

Shipfaster UI: Figma UI Kit & Design System

Access 8,000+ Customizable components to supercharge your design workflow.

Pricing Icon
3,200+ of Downloads
Review Stars
3,200+ downloads
Learn More
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.