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="https://app.monstercampaigns.com/c/h95qqg9sqx9atrsl/" 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 ) {
        document.getElementById('manual-optin-trigger').click();
    });
</script>

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="https://www.youtube.com/embed/jbP9C9bQtv4?enablejsapi=1" 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 = "https://www.youtube.com/iframe_api";
    var firstScript = document.getElementsByTagName('script')[0];
    firstScript.parentNode.insertBefore(tag, firstScript);
    function onYouTubeIframeAPIReady() {
        new YT.Player('player', {
            events: {
                'onStateChange': function(evt) {
                    if (evt.data === YT.PlayerState.ENDED) {
                        document.getElementById('manual-optin-trigger').click();
                    }
                 }
             }
        });
    }
</script>

---

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

Get Started With OptinMonster Today!