nicer play button

Since my AIUX video course app is in the final stretch of completion, a few weeks ago I signed up for a Wistia account and started uploading some of the course videos.

Wistia has a pretty extensive API, which is great, because I’m not the biggest fan of their play button. It's a rectangle with sharp edges and it feels a little out of place inside of my AIUX app.

Since my course is for designers, I’d hate for the the primary interaction—playing videos—have a button that’s not as fun and fitting as it could be to press.

The Default Wistia Player

This is the default Wistia player embedded with an iframe. That rectangular play button may not bother you, but it just felt really out of place within the context of my full lessson screen design.

lesson screen for aiux

Lesson page detail from the AIUX course

I want the experience of navigating and playing the AIUX lessons to be just as good as following along and learning from the course videos themselves.

At first, I tried overriding the CSS styles of the button's background property, but had no luck. I think the javascript injected inline styles were blocking me.

Creating the Custom Button

I designed a new play button and gradient overlay from scratch in Sketch and exported the little triangle icon as an .svg.

play button design in Sketch

I coded both of the elements on top of the Wista player iframe, then tapped into the Wistia API to hide the default play button and add the appropriate actions to mine.

Bringing it To Life

Check out this CodePen to see the markup for the overlay and play button as well as the Sass and Javascript. Press the play button, pause the video, and scrub the timeline to see how the custom button works with the Wistia video.

See the Pen zvxKov by Matt D. Smith (@mds) on CodePen.

AIUX Lesson Sneak Peek

That's one of the first AIUX lessons up there! Give it a watch if you'd like to learn to use Adobe Illustrator for rapid UX design and wireframing.

AND if you're interested in following along with more AIUX lessons, I'll send you a friendly note when it's time. Hop on the list below.

Update

The private beta was a smashing success.

Get notified the next time the course goes live.

testimonial from adobe