How to Show a Campaign After Video Has Ended

You can easily show a campaign after video play using Javascript and our MonsterLink feature.

In this article, you’ll learn how to show a campaign after a video has ended.

Before You Start

Here are some things to know before you begin:

  • MonsterLinks require a Pro or higher subscription.
  • This guide will only function with HTML5 Videos, it is not possible to use this with Flash video.
  • Need help creating your HTML5 Video Embed Code? Check out the Video for Everybody Generator for assistance.
  • Due to the advanced nature of this guide, at this time we do not provide technical support for implementing any portion of this guide.

Add MonsterLink

To show a campaign after a video finishes playing, follow these steps:

Add MonsterLink
  1. To begin, create and add a MonsterLink to your site following our guide.
  2. Next, you’ll edit the MonsterLink by adding some CSS to visually hide it from visitors. For example:
<a id="manual-optin-trigger" href="" target="_blank" style="display:none;"></a>

Self-hosted HTML5 Video

If you’re self-hosting your HTML5 video, add the following Javascript to the footer of your site to trigger the MonsterLink when the video ends:

<script type="text/javascript"> 
    document.querySelector('video').addEventListener('ended', function( evt ) { 

YouTube Video

If you’re using a YouTube video, you can use the YouTube API by following these steps:

Get the YouTube embed iFrame

  1. Follow these instructions to get the embed iFrame.
  2. Next, add ?enablejsapi=1 to the end of the src URL.
  3. Finally, add an id attribute to the iFrame, id="player", for example:
    <iframe id="player" width="560" height="315" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Now that you have the embedded iFrame in place add the following JavaScript to the footer of your site:

<script type="text/javascript"> 
    var tag = document.createElement('script'); 
    tag.src = ""; 
    var firstScript = document.getElementsByTagName('script')[0]; 
    firstScript.parentNode.insertBefore(tag, firstScript); 
    function onYouTubeIframeAPIReady() { 
        new YT.Player('player', { 
            events: { 
                'onStateChange': function(evt) { 
                    if ( === YT.PlayerState.ENDED) { 

If you’re serious about jumpstarting your website business growth, then get started with OptinMonster today!

Get Started With OptinMonster Today!

BONUS: Done-For-You Campaign Setup ($297 value)
Our conversion experts will design 1 free campaign for you to get maximum results – absolutely FREE! Click here to get started →