8 CSS & JavaScript Snippets for Creative Audio & Video Players


By

With the power of HTML5 and the ease of adding multimedia through technologies such as WordPress oEmbed, anyone can add compelling video or audio content to their website. And while it’s great that default media players are included from a purely functional standpoint, much more can be done to improve the user experience.

The default player may provide basic functionality, but it doesn’t necessarily match your branding or offer some more advanced features.

So designers have taken it upon themselves to add creative flair, along with high-end functionality, to create some incredibly unique media players with CSS and JavaScript. Take a look at some of our favorites below, and feel free to experiment with the source code.


Audio Player UI Snippets

Draggable Playlist by Antoinette Janus

The fact that you can drag this audio player around your screen is incredible. But even better is the simple and smart UI that Antoinette Janus has created. Scrolling through the playlist and playing the selected track is quick and painless.

See the Pen Audio Player by Antoinette Janus

Accessibility Built In by Joe Watkins

It’s a simple player, indeed. But Joe Watkins has created a terrific alternative UI for accessibility. The text-based buttons for play and pause ensure that anyone can consume the media, and the ability to view a transcript is just brilliant.

See the Pen Accessible HTML5 Audio Player by Joe Watkins

Material Design Comes to Audio by Michael Zhigulin

Michael Zhigulin’s use of Material Design on this player is outstanding. From the popular card layout to the smooth animations, it fits nicely with Google’s standard.

See the Pen Material Design UI Audio Player by Michael Zhigulin

Spinning Some Vinyl

The concept here is just too cool. Matt Stvartak’s player is basic in functionality, but the rotating vinyl that pops out of the sleeve is a standout design.

See the Pen UI Challenge – Week 6 – Audio Player by Matt Stvartak

Video Player UI Snippets

Smooth and Responsive by Matt Stvartak

Part of the idea behind HTML5 media was to ensure that mobile devices could access the same content as desktops (as opposed to Flash). Simon Goellner’s video player handles responsiveness with ease, and the fact that it can be styled with some simple CSS is most welcome.

See the Pen HTML Video Player (+UI +Responsive) by Simon Goellner

Labeled Controls by Tadaima

What’s nice about Tadaima’s HTML5 video player is that each item on the control bar shows a text label when the user hovers over it. While video controls are generally intuitive, adding this extra touch ensures everyone knows exactly what’s happening.

See the Pen HTML5 Video Player by Tadaima

Ultimate Accessibility by Joe Watkins

We mentioned Joe Watkins’ audio player above, but his video player also deserves some love. There are options for transcripts, closed captioning, sign language (which opens a separate video panel on the side), and descriptions. It’s everything you need to bring accessible video to your site.

See the Pen Accessible Video Player – Able Player test by Joe Watkins

Video That Moves With You by Charley Pugmire

A big trend we’re seeing lately is the ability of a video to “move” along with the user as they scroll down a page. Charley Pugmire has built a nice example of this. It’s a full-width YouTube video at the top of the screen and then shrinks into the sidebar on scroll.

See the Pen Sticky Sidebar Video Player by Charley Pugmire

Media Matters

The examples above run the gamut from simple to turbo-charged. But one thing that stands out is the ability to create a media player that matches your desired style and functionality.

And it’s also encouraging that making these UI examples accessible to everyone is on the mind of more than one designer.

There is any number of ways that we can take the plain old media player and turn it into something special. Hopefully, these UI snippets will inspire you to go beyond the basics.

Related Topics


Top
This page may contain affiliate links. At no extra cost to you, we may earn a commission from any purchase via the links on our site. You can read our Disclosure Policy at any time.