How do I embed a Vidyard video on a Visualforce page?
Embedding a Vidyard video into a Visualforce page allows you to create a rich experience for your Salesforce users while enabling your Vidyard players to track individual analytics for each user that views your content. By viewing the content on a Visualforce page, a user's email address can be automatically tied to the view record for that player. This data can be viewed in the Insights Dashboard, or directly from the user's contact or lead record in Salesforce.
For more information about Visualforce, see An Introduction to Visualforce.
Note: For this example, we will use the inline javascript embed code, however, the steps can also be applied to the other embed types.
Step 1: Create a Visualforce page
For instructions on creating a Visualforce page, refer to the following Developerforce article:
Step 2: Obtain your player's embed code
To obtain your player's embed code, refer to the following Vidyard article:
Step 3: Embed your player
Insert your embed code in between the <apex> tags on the page.
Because Salesforce does not accept the async attribute on its own, add "=true" to the attribute so that it reads async="true".
You can also add height and width parameters to size the player on the Visualforce page. 640x360 is a common size.
In between the <img> tags, add data-height="360" and data-width="640".
<apex:page >
<!-- The script tag should live in the head of your page if at all possible
-->
<script type="text/javascript" async="true" src="https://play.vidyard.com/embed/v4.js"></script>
<!-- Put this wherever you would like your player to appear -->
<img
style="width: 100%; margin: auto; display: block;"
class="vidyard-player-embed"
src="https://play.vidyard.com/uuid.jpg"
data-uuid="your player's uuid"
data-v="4"
data-type="inline"
data-width="640"
data-height="360"
/>
</apex:page>
Step 4: Modify the embed code to track the Salesforce user
Modify the javascript to include the Salesforce email merge tag parameter. This allows the player to tie the view data to a particular user using the email address associated with their Salesforce user account.
In between the embed code <img> tags, add data-vyemail={!$User.Email}
<apex:page >
<!-- The script tag should live in the head of your page if at all possible
-->
<script type="text/javascript" async src="https://play.vidyard.com/embed/v4.js"></script>
<!-- Put this wherever you would like your player to appear -->
<img
style="width: 100%; margin: auto; display: block;"
class="vidyard-player-embed"
src="https://play.vidyard.com/uuid.jpg"
data-uuid="your player's uuid"
data-v="4"
data-type="inline"
data-width="640"
data-height="360"
data-vyemail=“{!$User.Email}”
/>
</apex:page>
When the user views the video, Vidyard will automatically associate the view data with the user.