Done with the clickbait videos, add actions to care about

Videos are powerful to build connections and inspire action. I recently introduced sprite animations for mobile covers to make videos more enticing to watch.

Building Animated Covers for Video with Sprites

But what if you want to do something more than just get a view? Let’s move beyond vanity metrics and add actions that matter. In this post I’ll outline how you can use PlayerJS alongside the Video API to add calls to action to your video. There’s three examples that touch on a range of calls to action including: short preview to full video, connecting on social, payments, and e-mail signup. Before we begin though, there’s one requirement.

You must be passionate about the videos you’re posting.

You care, and your audience will notice. When you add calls to action, it will feel genuine, rather than noisy and annoying.

I. Follow Up Video and Connect on Social

This first video is a short clip of a talk I gave, from the view of the audience. I want to include a follow up that brings up the full talk and then also a way to keep in touch with me. The short video clip inspires interest, which can be guided towards a longer video that otherwise might not get watched. I also channel that interest towards a conversation on Twitter.

Click play on the video below. On mobile, the call to action will display after the video closes.

See the code here: https://jsfiddle.net/6arzpgca/17/. Video credit: charlene mcbride.

Here I use PlayerJS to listen to the video events, and then jQuery to fade in and out the call to action. Note that PlayerJS works with the Video API, but also several other popular video providers like YouTube, Vimeo, and Vine. On ‘pause’ or ‘end’ the call to action displays. When ‘play’ is clicked again, it will fade out.

First, add an ID to the iframe, then you can programmatically control it. I use ‘short-talk-clip’ as my ID. The call to action HTML is within the embed container, and begins with CSS display:none, so it is not visible. Here is the javascript to bring it in and out. See the full code here: https://jsfiddle.net/6arzpgca/17/.

var player = new playerjs.Player(‘short-talk-clip’);
var cta = $(‘.call-to-action’);

player.on(‘ready’, function() {
player.on(“play”, function() {
$(cta).fadeOut();
});

player.on(“pause”, function() {
console.log(‘pause’);
$(cta).fadeIn();
});

player.on(“ended”, function() {
console.log(‘display call to action’);
$(cta).fadeIn();
});
});

$(“#watch_talk”).click(function() {
$(“#short-talk-clip”).hide();
$(cta).fadeOut();
})

At ‘pause’ or ‘end’ this displays:

Note there is a linear gradient for the call to action, and it fades out before the player controls. This way viewers can choose to keep watching, or replay the video.

When you click the first button, the player will be replaced with another one that has the full talk. When you click the second button it opens up my twitter page, so you can see the latest things I’m doing.

II. Link to website and e-commerce

It’s great to be able to give more information when it is desired, and provide ways for your audience to support you.

This next video shows me doing a timelapse drawing. After someone watches it, I imagine they are interested in that kind of art. At the end of the video, I link to a page that features more work like it. Perhaps viewers want to support the work, so I also add another link that allows people to support the art through Square Cash.

See the code here: https://jsfiddle.net/nomhsy3r/10/.

The call to action for this video looks like this:

III. Email Subscribe

Getting emails is a quick way to build momentum with something you’re working on. In this next example, I use a Google Form with the video to get a quick email subscribe form.

This next video shows the first steps in prototyping an idea with these little laser cut build blocks. As I share this, I want a way to stay in touch with people who are interested in seeing the project develop. A quick way to do this is collect e-mails as the call to action.

You can see the code here: https://jsfiddle.net/9qme5aex/7/. Collaboration with Sands Fish

On ‘pause’ or ‘end’, the player displays the following call to action:

A few things to note here. I first make the form with Google Forms, which includes a way to save the email addresses. I can open up the form editor and see who has signed up.

The form has an embed with huge borders, so in smaller spaces the form part doesn’t even show up. In order to make it look great in context, we simulate scrolling to a particular position, and set smaller boundaries for the embed. I use Embedly to get the embed code, and add this CSS to focus in on the form field.

.embedly-embed {
position: absolute;
top: -200px;
left: -50px;

}

.form-wrapper {
width: 350px;
height: 250px;
overflow: hidden;
position: relative;
margin: 0 auto;
}

The background is white, so to make it work in the call to action, I have a fading white background instead of the fading black one I use in the previous two examples. All of the emails collected here are saved in the Google Form editor.

Get more from your video, give more to your audience

You have a vision. You’re sharing videos to express what you’re passionate about, and now you can build more into your videos. Here you’ve seen three examples of using calls to action to give your audience more information about your work, offer ways to connect further, and even create ways for them to support you.

More than anything, make these calls to action thoughtful. If they’re not, your audience will see through it and ignore them. Those valuable moments and real estate will be lost. Make it count.

If you find these video features pretty cool, please click the ❤ to help spread the post. Thanks!