Embed your player
- From the Vidyard dashboard, click Content > Player
- Hover your cursor over a player, click Share
- Select the necessary embed code:
- Inline embed: Displays a player directly on your webpage that can be viewed browsing the rest of the page. The inline embed code is available as both a JavaScript embed or an iframe embed
- Use the Trouble embedding? checkbox to change from the inline option to an iframe embed code. Keep in mind: players embedded using the iframe method cannot pass video view data to third-party integrations like Salesforce, Marketo (or other MAPs/CRMs)
- Lightbox embed: Displays a clickable thumbnail that loads the lighbox player in the center of the screen, dimming all other elements on the page. Use the lighbox embed code when you want to highlight your player and make it the focus of the page.
- Responsive embed: Display an out-of-the-box responsive player as either inline or as a lightbox. The responsive embed code also has the Vidyard player API built-in. Simply add any necessary javascript after the embed code to manipulate the settings of the player
- Check Use Lightbox to which the responsive embed to a lightbox. Use the height and width fields to configure the player's max size.
- Check Use Lightbox to which the responsive embed to a lightbox. Use the height and width fields to configure the player's max size.
- Inline embed: Displays a player directly on your webpage that can be viewed browsing the rest of the page. The inline embed code is available as both a JavaScript embed or an iframe embed
Quick tips:
- The lightbox embed code provides a clickable thumbnail that launches the lightbox player. It is also possible to launch the player from a text hyperlink (see our sample code).
- You can append a query string to your webpage URL to launch the lightbox upon page load. This means that you can launch the lighbox on page loads for some visitors (eg. through an email link), while allowing others to navigate your site as usual (see our sample code).
- If you embed a player more than once on a given page, the videos will not load. In order to embed a video in two places on one page, add the video(s) into two separate players, then embed each of these players on the page separately.
Which embed type to use for Marketing Automation Platforms (MAPs)?
One of Vidyard’s most powerful features is its ability to integrate with various Marketing Automation Platforms (MAPs) such as Marketo, Eloqua and Hubspot. How you choose to embed a player on your website may impact how Vidyard communicates with these MAPs.
In order to integrate with a MAP, Vidyard relies on communication with a cookie on the viewer’s computer. To gain access to this cookie and the data it contains, two things must be present:
- A Javascript code for your MAP's tracking cookie from Marketo, Eloqua, or HubSpot must be embedded on the same page as the player.
- A Vidyard Javascript embed code must be loaded on the page.
| Embed Type | Can communicate with MAP? |
|---|---|
| Javascript inline | Yes |
| iframe inline | No |
| Lightbox | Yes |
| Branded sharing page | Yes (See notes below) |
| Video Hub | Yes (See notes below) |
Note: Branded Sharing Pages and Video Hubs are pages hosted by Vidyard that contain players and have customizable HTML/CSS/Javascript. This customization allows you to place the tracking script from your MAP of choice on the page, allowing for the integration to function.
Both the inline embed and the iframe embed play Vidyards videos from within an iframe. Iframe embeds, however, are not compatible with Marketo, Eloqua or HubSpot.
The reason for this is cookie access. For Vidyard to communicate view data to a MAP, we must first be able to access the user’s cookie associated with the particular MAP. This cookie contains all the necessary info (user identification etc.) for us to link a particular viewer to a lead/contact in the MAP.
Inline embed codes do not directly load the iframe which plays the Vidyard player. They first perform some computation to check for and grab any MAP cookie. Then, when the script loads the player, it provides it with the information contained within the cookie (as an iframe cannot directly access a cookie from another domain).
When using an iframe embed, the iframe containing the Vidyard player is loaded directly. Without the Javascript to pass on the cookie data, Vidyard has no way of accessing the data within the cookie.