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 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.
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
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
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.
The private beta was a smashing success.
Get notified the next time the course goes live.