How do I close an iframed event on button click?

Disclaimer: This article is provided for instructional purposes only. Vidyard does not support or guarantee the code. Vidyard also cannot offer support for third-party tools and platforms or technologies such as JavaScript, jQuery or CSS

The Goal

While the built-in event builder in Vidyard offers a wide variety of customization options, sometimes you may want to use a previously designed page or layout for your events by use of an iframe. 

Iframes allow for easy access to external pages directly from the frame you are currently looking at. 

In this article, we are going to look at what elements are required so that actions in the iframe can be used to close the event and resume playback. 

The Problem

Iframed content does not provide an option to continue playback after submitting a form or on-button click by default since the page being iframed does not have a direct way to communicate with other elements on your page. 

This means that even after your viewers have filled out a form or clicked a download link, the player will not know these actions have been completed and will not resume playback automatically. 

In theory, this could be solved by placing a "resume video" button on your MAP (Marketing Automation Platform) form submission confirmation page, and include references to the Vidyard player.

However, current web browser technology prevents Javascript from controlling iframes on two domains, so the reference to player controls will not function. 

The Solution

Our solution to this problem is to use an iframed form, but add some additional code to both your MAP and Vidyard event. 

This allows the parent and child iframes to communicate with each other via post messaging rather than Javascript.

1. Add the following script to your iframe code:

   <script type="text/javascript">//<![CDATA[
   console.log("Confirmed Submission");
   window.parent.postMessage("resumePlay","*");
   // ]]></script>

   Note: The above script will immediately initiate the event close which works well on page redirects after a form is submitted. If you would like to tie the event close to a button press or other action, use the following script instead:

   <!-- Button on click calls killEvent function to continue playback -->
   <p><button onclick="killEvent()">Continue Video Playback</button></p>
   
   <!-- Function to send remove event message -->
   <script type="text/javascript">// <![CDATA[
     console.log("script initiated");
    
    function killEvent(){
   console.log("Confirmed Submission");
     window.parent.postMessage("resumePlay","*");}
   // ]]></script>

2. Next, add the following script to the event that you created in the Vidyard event builder:

   <!-- Continue Playback Script -->
   <script type='text/javascript'>
   function receiveMessage(event){
      if (event.data=="resumePlay"){
         console.log("Remove event received");
   var ctaId = window.frameElement.id.split('_')[1];
   var playerId = window.frameElement.src.split('/');
   playerId = playerId[playerId.length-3];
   var playerData = {uuid: playerId, event: 'closeCta', id: ctaId,
   forceClose: true};
   window.parent.postMessage(JSON.stringify(playerData), '*');
      }
   }
   window.addEventListener("message", receiveMessage, false);
   </script>

3. Test to ensure that playback resumes after you complete the event.