How to add conversion overlay window at the end of a video?

Many companies use videos as a medium to communicate their solution or the problems they are trying to solve for users. It has already been seen that videos have better conversions than text or images and they still do not optimize it for conversions.

One of the simplest ways to enhance conversion from a video is to add a message with call to action buttons at the end of the video (post roll) which guides users to take the next step once they have finished watching it. For different businesses it can mean guiding users to download a software or create a new account or just collect their email address.

In this article you’ll learn how to implement this simple conversion tactic to your videos with or without any help from a developer. If you understand a bit of HTML, CSS and Javascript then you can follow the steps and code provided in this tutorial to implement it by yourself or you can pass along this article to the developer who can implement it for you.

Most of the companies host their product video either on a video hosting website like Youtube or Wistia or on their own servers. I would only cover the implementation for self hosted videos. If you host your videos on Youtube/Wistia then consider reading the next two paragraphs and then move on.

Youtube provides a great way to add call to actions to the videos with the help of annotations. Annotations are clickable text overlays and can appear at any set time during the video. Normally they seem annoying because most of the implementation is awful however a minority of users have found ingenious ways to use it to their advantage. Here is a playlist for your inspiration. If you still want me to cover the implementation for videos hosted on Youtube, let me know in the comments or drop me a line on twitter.

Wistia on the other hand provides much more customized Video Actions which allows you to add call to action buttons in plain text or image or HTML. That’s powerful. Not only this, you can add a backlink in your video and when someone embeds it on their website they’ll pass SEO juice to you. Amazing!! You can further explore all the possible video customization on their documentation page here.

Now moving on…

For Videos Hosted On Your Own Server Or a CDN

Step 1 – Adding HTML 5 Video Player Using Video.js

To start with you need to add Video.js library to the page where you want to display your video (homepage for most of the websites). Video.js is an open source HTML 5 video player which helps fix cross-browser inconsistencies, adds additional features like fullscreen and subtitles, manages the fallback to Flash or other playback technologies when HTML5 video isn’t supported. So basically you don’t need to worry about different implementations, it takes care of it for you.

First go to Video.js website and click on Download from the top menu. Then head over to documentation of how to use Video.js to setup your own video player and implement the video player on your website. It’s pretty straight forward.

Note: Ideally you should center the big play button when you first setup the player and the process to do so is also mentioned on the documentation page.

Once you’re done, your video tag which renders your video player should look something like following with the src attribute linking to the URL of your video and poster attribute linking to the image URL that you want to show when your video hasn’t started. You can optionally use data-setup options to add various functionality to your video like playing it in loop, autoplay on page load, setting player controls etc.

Now that your video player is all set and working it’s time to add overlay screen at the end to convert viewers.

Step 2 – Adding Overlay Screen At Video End (Post Roll)

We will be using javascript to run a small script which is triggered when the video has ended. Video.js API supports an ‘ended’ event which triggers when current time equals duration.

Add the following code before the closing body tag on the page you have your player or add it to the javascript file placed before the end of body (</body>) tag.

Let’s go through the above code and see what it does and how you need to change it when you add it to your page.

2nd line is used to define what ‘ended’ event of the video player will do when triggered. You need to replace  #example_video_1 with the id of the video tag of your player. Don’t forget to add # before the id.

3rd line allows you to add HTML code (overlay screen) which will be triggered at ‘ended’ event. Replace the id – #example_video_1 here as well.

The following code is for the screen that will appear when the video has ended and it includes a message and two call to action buttons –

I have split the HTML code on multiple lines so it is easy to understand, you can remove the ‘+’ and keep all the code in a single line.

You can also alter the above HTML code and change how the screen looks. You need to replace the first two href value from # (line 3 and 4) to the links where you want to redirect users. Optionally you can add javascript code to trigger an event when the buttons are clicked.

Note – Do not replace the third href value (line 5) as Replay Video action is being triggered with the script as mentioned below and we don’t want to redirect user to a different page on that link click.

The next part of the code is to add functionality to ‘Replay Video’ –

Again, replace – example_video_1 with the id of your player and do not add # before it.

You also need to add CSS to any of your CSS files that is being used on the page. Add this –

You can again alter the CSS and make it prettier. And that’s it, your video will now start showing a conversion screen at the end.

Our End Result

Initially your video player would look like this –

Video Player Before Start

And while video is playing –

Video Player During Play

And our conversion overlay screen at the end –

Conversion Overlay At Video End

If you liked the tutorial, consider sharing it with others. :)
Pallav Kaushish
Pallav Kaushish
A marketing junkie fascinated with the amalgamation of marketing and psychology. I work with startups to boost their growth. Always happy to share ideas and learn from others. Feel free to drop me a note via about page.
Related Posts