Skip to main content

On April 3rd, 2017 Vidyard will be switching to a new user interface. Click here to learn more.

Vidyard Knowledge Center

Embed video on an Act-On landing page

After synchronizing Act-On and your Vidyard account, we need to ensure that the videos from your library can be shared in a meaningful way to your Act-on leads.

Here are the steps to embed a Vidyard video on an Act-On landing page:

Get the embed code for your player

In order to embed a Vidyard video, you’ll need to decide how you would like your video to appear on your Act-On enabled page. Vidyard offers two options for embedding your video.

Inline embed: Embedding a video inline leaves the player in a fixed position on the page where it can be played.

Lightbox embed: When using the lightbox embedded player, a thumbnail is placed on the page. Visitors clicking the thumbnail will launch the video player in a lightbox.

To obtain the embed code for your player, complete the following steps:

  1. Log into your Vidyard account at http://www.secure.vidyard.com/.
  2. In the Content >  Player menu, hover your mouse over the player you want to embed and click Share.
    The Share tab in the player menu.
  3. Choose the embed method you wish to use and copy the embed code to your clipboard. 
    Note: Vidyard does not recommend using the iframe code for embedding inline players. The Act-On landing page will not track the player if it is embedded using the iframe code.
    Embed codes

    Note: Vidyard does not recommend using the iframe code for embedding inline players. The Act-On landing page will not track the player if it is embedded using the iframe code.

Embed the player on an Act-On landing page

  1. Sign into Act-On.
  2. Navigate to Content, then Landing Pages and either create a new landing page or edit an existing one.
    Under the Content in the left menu, click Landing page.
     
  3. Open to edit the landing page where you want to embed video. 
  4. Drag the Custom Content block onto your page where you want to embed the video.
    Dragging the Act-On Source code editor onto the landing page template.
     
  5. If you have a custom CNAME set up, and have Javascript enabled on your account, simple paste the Vidyard embed code into the custom code editor, then click OK and Save the page. 
  6. If you do not have a custom CNAME, or do not have Javascript enabled, then instead paste the following code into the custom code editor, replacing [UUID] with the UUID for your player. (Check out this article to learn how to find your player's UUID.)
  7. <div id="[UUID]">
    </div>
    
  8. Click OK.
  9. Click the Script editor icon to open the Javascript editor. 
  10. Enter the following Javascript snippet if you want to embed an inline player (remember to enter the [UUID] for your player):
  11. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript">
        // Replace [UUID] with the UUID of the player you are attemping to embed.
        // To find the UUID of a player, see http://knowledge.vidyard.com/Support_Topics/Troubleshooting_Center/Find_the_UUID_for_your_player/
        var embedScript=document.createElement('script');
        embedScript.type='text/javascript';            
        embedScript.id='vidyard_embed_code_[UUID]';
        embedScript.src='//play.vidyard.com/[UUID].js?v=3.1.1&type=inline';
    $(document).ready(function(){
    $("#[UUID]").append(embedScript);  
        });
    </script>
    
  12. Enter the following snippet if you want to embed a lightbox player (again, remember to enter the [UUID] for your player):
  13. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript">
        // Replace [UUID] with the UUID of the player you are attemping to embed.
        // To find the UUID of a player, see http://knowledge.vidyard.com/Support_Topics/Troubleshooting_Center/Find_the_UUID_for_your_player/
        var embedScript=document.createElement('script');
        embedScript.type='text/javascript';            
        embedScript.id='vidyard_embed_code_[UUID]';
        embedScript.src='//play.vidyard.com/[UUID].js?v=3.1.1&type=lightbox';
    $(document).ready(function(){
          $("#[UUID]").append(embedScript);
          /* When adding the UUID to the function name "fn_vidyard_[UUID]" in the line below, replace any dashes (-) with dollar signs ($) e.g. fn_vidyard_arlhtoDOr-y4rGm-eXnOFA becomes fn_vidyard_arlhtoDOr$y4rGm$eXnOFA */
          $("#[UUID]").append("<div class='outer_vidyard_wrapper'><div class='vidyard_wrapper' onclick='fn_vidyard_[UUID]();'><img alt='Homepage video' width='360' src='//play.vidyard.com/[UUID].jpg?' /><div class='vidyard_play_button'><a href='javascript:void(0);'></a></div></div></div>");
        });
    </script>
    
  14. Click OK, then Save the page. 
  15. Note: After embedding the inline player on your landing page, it will not be visible in the page editor. To see what the player looks like on the page, use the Public URL.
  • Was this article helpful?