Add a Play Button IllustrationEver want to add a Play button to the center of your video to encourage learners to click on it? If you’re like Community member Katerine Girard, the answer is yes. She started a discussion on that very topic a while back, which inspired me to try it out in Articulate Storyline. 

Add A Play Button Screenshot 1

Here is a link to the published version. Like it? Follow these five easy steps to create your own!

1. Insert a Video

Start by inserting your video onto the base layer of your slide. Storyline accepts most video formats by default, so you don’t have to worry about converting it.

Add A Play Button Screenshot 2

2. Add a New Slide Layer

Next, add a new slide layer and name it—for example, let’s use “Play” as its name.

Add A Play Button Screenshot 3

3. Create a Play Button

Now it’s time to create the Play button on the play slide layer. If you already have an image, go ahead and insert it onto your slide layer. If you don’t have one, it’s a cinch to create. Simply insert a circle, then a triangle, and group them together.

Add A Play Button Screenshot 4

4. Insert a Semi-Transparent Rectangle (Optional)

Have you noticed how sometimes when you pause a video, it becomes dimmer? This technique used to signal to viewers that the video was, in fact, paused. To create this effect in Storyline, all you have to do is add a rectangle across the entire slide layer and adjust the transparency settings. In this example, I’ve used a dark gray color with 44% transparency, but you can use any color and transparency settings that you want.

Add A Play Button Screenshot 5

Once you’ve adjusted the transparency settings to your liking, go to your timeline and drag the rectangle to the bottom so that it is behind your Play button.

Add A Play Button Screenshot 6

5. Add Triggers

With your play slide layer in place, it’s time to add a couple of triggers on your slide layer. Start with two triggers for your Play button: Hide This Layer and Play Media when User Clicks.

Add A Play Button Screenshot 7

Add A Play Button Screenshot 8

Now, go back to the base layer, where you should add three triggers. Set the first one to show the Play layer when the timeline starts, so the Play button appears when the learner views the slide.

Add A Play Button Screenshot 9

Then, select the video and add two more triggers: Pause Media (first image below) and Show Layer (second image below) When User Clicks. That way when the learner clicks on the video, it will be paused and the Play button will display on the screen.

Add A Play Button Screenshot 10

Add A Play Button Screenshot 11

In writing this, I think it takes longer to explain it than to actually set it all up! Do you have tips for adding a Play button to videos? Leave a comment below to share your experience.


Want to give it a try, but don’t have Articulate software? No problem! Just download a free trial. Don’t forget to come back to E-Learning Heroes regularly and follow us on Twitter for more helpful advice on everything related to e-learning.