HubSpot Video and Vidyard Update
Background
As we launch HubSpot Video 2.0, we’ll lose the ability to interact with Vidyard APIs on behalf of existing customer accounts. Additionally, analytics webhooks will be discontinued as they will be uneditable by us and they exercise highly specific code in our analytics repository. Our partnership with Vidyard will continue through Media Bridge. HubSpot Video will be hosted on a new platform moving forward. This guide applies to customers that wish to update content independently and that at the time of publishing are paid Vidyard subscribers.
What does this mean?
Vidyard-hosted videos (called “Vidyard videos” below for simplicity) will continue to be served by Vidyard if they were inserted in HubSpot content using a Vidyard-supplied HTML embed code. Other videos that were inserted in HubSpot content using the HubSpot video picker sidebar, HubSpot-supplied Video module, or raw HubL code, will be migrated to HubSpot Video 2.0 and will no longer be served by Vidyard.
The following approach can be used to manually update code for your content.
Note: a migration manifest file, containing
- Pages using HubSpot Video 1.0 videos (though this may miss some edge cases)
- Corresponding Vidyard embed codes
- Links to those videos in Vidyard
Will be automatically generated and placed in each portal requiring this migration, in the files tool. This is available at https://app.hubspot.com/l/files/folder/hubspot_video_manual_migration_assistant/ and will be an important tool as you conduct the migration.
Note that this migration file will contain “embed codes” for each video, which will be the <img /> placeholder elements for each video (details here: https://knowledge.vidyard.com/hc/en-us/articles/360010001713#learn-more-about-each-embed-option ). Each page on which these video placeholder elements appear needs to also include the Vidyard embed js. HubSpot currently includes this in the footer, so you may want to include it there. However, if you can include it in the header instead, this is Vidyard’s recommended location.
Here’s an example:
<!-- The script tag should live in the header of your page if at all possible. This won’t be included in the migration file’s embedCode data, but does need to be on the page for the video to play.-->
<script type="text/javascript" async src="https://play.vidyard.com/embed/v4.js"></script>
<!-- Put this wherever you would like your player to appear. This will be listed for each video in the portal’s migration file. -->
<img
style="width: 100%; margin: auto; display: block;"
class="vidyard-player-embed"
src="https://play.vidyard.com/xu6gkgkZZY7RKZqZaefyi1.jpg"
data-uuid="xu6gkgkZZY7RKZqZaefyi1"
data-v="4"
data-type="inline"
/>
There will also be a file containing players not used in any pages (they will have no publicPageLink or pageEditorLink values) that can be used to help migrate any videos you discover in the site which weren’t included in the update manifest.
Method of embedding | Example | What will happen to it? |
Raw Vidyard embed code inserted in Rich Text area | 
| Remains unchanged, continues being hosted by Vidyard |
Raw Vidyard embed code pasted using HubSpot Video Module’s “Embed Code” option | 
| Remains unchanged, continues being hosted by Vidyard |
Inserted using HubSpot Video picker in Rich Text area | 
| EITHER:
|
Selected using HubSpot Video Module’s “HubSpot Video” option | 
| EITHER:
|
Raw HubL | 
| EITHER:
|
Below are steps on how to deal with each of the above cases that require manual replacement.
Replacing HubSpot Videos inserted in Rich Text Areas with their Vidyard Embed codes.
- Identify the video on the page that you want to replace with its Vidyard embed code
- Identify the Vidyard video corresponding to this file (in your Vidyard account) and copy its embed code. Or, copy the embed code from the migration file which was automatically placed in the HubSpot Files tool.
- Use Vidyard’s tools to add any CTAs or Forms that you wish to show in the video.
- Delete the original video from the rich text area.
- Insert a new video in the rich text area by pasting the embed code you copied earlier.
- You can customize your video player settings in Vidyard to re-implement any appearance customization (e.g. colors).
- Repeat for each video on the page
Note: HubSpot will make this easier by sending the portal a list of pages using these videos, along with their embed codes as noted above.
Replacing HubSpot Videos which were inserted using the HubSpot Video Module with their Vidyard Embed codes.
- Identify the video on the page that you want to replace with its Vidyard embed code
- Identify the Vidyard video corresponding to this file (in the migration file in the portal’s Files tool) and copy its embed code.
- The migration file is located in this folder in the portal’s files tool: https://app.hubspot.com/l/files/folder/hubspot_video_manual_migration_assistant/ and will be re-generated daily.
- Use Vidyard’s tools to add any CTAs or Forms that you wish to show in the video.
- In the video module, select “Embed” rather than “HubSpot Video”. Then, select “Embed Code”
- Paste the embed code you copied earlier into the video module.
- Modify the Vidyard embed code using these parameters to reimplement any appearance customization (ie colors) you’d chosen on your page.
- Repeat for each video on the page
Note: HubSpot will make this easier by sending the portal a list of pages using these videos, along with their embed codes.
Replacing HubSpot Videos inserted in Rich Text Areas with the Vidyard Media Bridge Module
- Check whether Vidyard’s Media Bridge integration is installed in the HubSpot Portal. If not, you may need to contact Vidyard to enable their Media Bridge integration with HubSpot. If it is installed, proceed.
- Confirm that it is present in the “connected apps” section of the HubSpot Marketplace for the portal.
- Identify the video module or the video in the rich text area that you wish to replace.
- Remove it
- Add a Vidyard Video module to the same area on the page. See Vidyard’s instructions on how to use the Media Bridge Module.
- Select the relevant video from the Vidyard picker. If no videos appear here, it means the integration is not properly connected and you should contact HubSpot for assistance.
- To ensure you are embedding the correct video, match the name, creation date, and length of the video with the details from this portal’s migration details file (mentioned above). If there are multiple videos with the same details, you may need to examine them to find the correct one.
- Repeat for each video on the page.
Replacing HubSpot Videos inserted in Rich Text Areas or modules using raw HubL
Note that this should only be relevant for developers or advanced users. If you don’t already know whether this section applies to you, it likely doesn’t.
- You may first want to visit the page or content you’re editing, noting how you are using HubL and whether the styling relies on any of the wrapper elements around the output of the video_player HubL tag
- Identify the video on the page that you want to replace with its Vidyard embed code
- Obtain the Vidyard embed code corresponding to this video.
- You may do this either from the HubSpot-supplied list of pages and embed codes, OR
- You may visit the migration file in the portal’s Files tool, then copy the embed code from there, or manually assemble the embed code based on the video’s UUID and instructions here:
- Use Vidyard’s tools to add any CTAs or Forms that you wish to show in the video.
- Delete the original video_player HubL tag
- Insert a new video area by pasting the embed code you copied earlier exactly where the HubL had been.
- Modify the Vidyard embed code using these parameters to reimplement any appearance customization (ie colors) that had been chosen in the page.
- Repeat for each video on the page
Note: the migration file mentioned above will be an important tool in selecting the embed codes for use on the page. The customer screenshot included below will require access to the associated Vidyard account.
You can then optimize this by moving Vidyard’s player script to the page header:
Edge cases
There are several edge cases that may require slightly more work.
Complicated HubL, for example, HubL that iterates over the contents of a HubDB table containing videos or HubL that conditionally renders a video, may not be detected by HubSpot in its listing of video uses. If you use custom HubL in modules or templates, or if you have HubDB tables containing videos, you will need to pay special attention to these uses to ensure they are migrated.
Modules, coded files, and assets from the marketplace may have video_player uses. These will continue to work after the migration to 2.0, but will not render Vidyard videos. They will render either:
- A HubSpot Video 2.0 video, hosted by HubSpot (if no action is taken in this portal prior to our migration deadline), or
- A raw HTML5 video tag showing the corresponding video file in the HubSpot File Manager
In order to continue hosting videos on Vidyard, you will need to edit these modules or coded files in their design manager.
Edge case: Design Manager module with the video field
If a portal has a design manager module that uses a video field, you could use one of the following approaches to migrate it.
Preferred approach:
This approach applies only if Media Bridge is installed. Otherwise, you will need to pick one of the 3 options from the next section.
The preferred approach to migrate portals with a design manager module and a video field that uses HubL is to update the module to use Media Bridge. The instructions to do this are detailed here in this migration guide.
Options:
- Option 1: Update the pages where the video module is used.
- Update the pages individually. Remove the module and use a different approach to achieve the same result. The goal of the migration is to preserve styles, CTAs, forms, and page layout/format. You can use a rich text module, or whatever else you deem appropriate for this situation.
- Leave the Design Manager module untouched. This will ensure that when the portal is cut-over to video 2, the Design Manager module will continue to function as it used to, only with video 2 instead of video 1. This also means that content creators will continue to have the same module if they have developed a cognitive habit to look for the specific module and use it.
- Option 2: Clone the Design Manager module and change the video field with a text field.
- Cloning the module and swapping it in each of the pages will guarantee that the styles are untouched.
- Please do not delete the old module.
- The text field should be used for the external UUID for the video
- Swap the HubL tag with the embed code you would use on a normal individual page, making sure it renders the player once on a page, and making sure adding all the custom HubSpot attributes for the header script can render any special conversion assets (CTAs, Forms).
- Be sure to use a naming convention that will help the user understand that the module has been cloned to use Vidyard. Example, naming it video_module_vidyard_embed_code if the original module is called video_module. Please do feel free to choose a naming convention of your choice, we recommend just keeping it consistent.
- Option 3: Clone the Design Manager module and change the video field with an embed field.
- This option is identical to option 2, but uses an embed field rather than a text field.
- Please do not delete the old module.
When to choose which option?
We rely on your best judgment to make this call.
However, keep in mind that you may want to consider your portal’s special details. For example, if this module is used in hundreds of pages, you may not want to update each page by itself following option 1. You may need to clone the module and update all the pages, by choosing option 2 or 3. However, it may make sense to update the pages directly and leave the module as is if the module is only used in a couple of pages.
Cookie banner settings
If the portal has its cookie banner enabled in CMS pages, you will need to ensure this is set up to work with the Vidyard videos you are embedding on the page.
Steps:
- Check the portal’s cookie banner settings here: https://app.hubspot.com/settings/<portalId>/data-privacy/cookies - if the cookie banner is active for any of the pages affected by the migration, you will need to ensure it remains present on the pages you migrate and that it is properly passing consent to the Vidyard player.
- Head over to the following URL: https://app.hubspot.com/settings/PORTAL_ID/website/pages/all-domains/page-templates . Be sure to remove PORTAL_ID and replace it with the value of the portal ID being migrated. You can manually find this under Settings → Website → Pages.
- If the cookie banner from step 1 is active, add the code snippet to the footer:
var _hsp = window._hsp || [];
_hsp.push(['addPrivacyConsentListener', function(consent) {
if (window.vidyardEmbed && window.vidyardEmbed.api) {
VidyardV4.api.GDPR.consent(consent.categories.analytics);
}
}]);
- Please do not modify the snippet unless absolutely necessary. In cases where the script needs to be modified, please reach out to HubSpot to verify the changes based on the requirement.
- New additional step in the process for the cookie consent: Be sure to check all subdomains in the settings page mentioned above in this section. If any footer for a subdomain is overwritten, please make sure to include the snippet mentioned here. Not doing so makes a portal lose all analytics for the affected subdomain.
- You must also include the data-gdpr_enabled="1" attribute in all of that portal’s video placeholder img elements.
General details about using the cookie banner are here: https://knowledge.hubspot.com/reports/customize-your-cookie-tracking-settings-and-privacy-policy-ale... and here https://developers.hubspot.com/docs/api/events/cookie-banner?_ga=2.98437151.1022404127.1634570100-13... , and instructions on using the Vidyard consent API are here: https://knowledge.vidyard.com/hc/en-us/articles/360021923033-How-do-I-allow-viewers-to-consent-to-vi....
GDPR settings
If your portal has “Enable GDPR Tools” turned on here https://app.hubspot.com/settings/<portalId>/data-privacy/data-protection, then it is especially important to make sure that the cookie banner mentioned above is working. You must also include the data-gdpr_enabled="1" attribute in all of that portal’s video placeholder <img /> elements.
Appearance Customization
You may also need to customize the placeholder element to match the fields specified in the original page - you can view the original page and extract the needed params (or pull them from the HubL if it’s accessible to you.) You’ll use these parameters to reimplement any appearance customization (ie colors) you’d chosen on the page.
Here’s an example:
For this original placeholder element, the attributes to be manually added to the new embed code are bolded
|
<img class="vidyard-player-embed" src="https://play.vidyard.com/K8kQz6eHjY6NoveVP6vVHw.jpg" width="640" height="360" style="display: block; max-width: 100%; margin: 0 auto; width: 640px; height: auto;" alt="big_buck_bunny-1-Sep-22-2021-05-07-40-83-PM" data-uuid="K8kQz6eHjY6NoveVP6vVHw" data-v="4" data-width="640" data-height="360" data-viral_sharing="0" data-embed_button="0" data-hide_playlist="1" data-color="FFFFFF" data-playlist_color="FFFFFF" data-play_button_color="2A2A2A" data-type="inline" data-autoplay="0" data-loop="0" data-muted="0" data-hidden_controls="0" hs-original_external_id="" hs-original_external_uuid=""> |
|
- data-viral-sharing
- Style (match the original)
- alt
- data-uuid
- data-width
- data-height
- data-embed_button
- data-hide_playlist
- data-color
- data-playlist_color
- data-play_button_color
- data-autoplay
- data-loop
- data-muted
- Data-hidden_controls
You may include all of these, but especially want to include any of these that differ from the defaults (see https://knowledge.vidyard.com/hc/en-us/articles/360009879754-Use-query-parameters-and-data-attribut... for items that can be set to 1 to enable or disable a feature - they need not be included if they are already set to the default.
You may omit hs-original_external_id and hs-original_external_uuid as they will no longer be used after the migration. You may also omit other attributes not mentioned in the Vidyard documentation.
Knowledge base article videos
If a video is used in a knowledge base, the header code to convert the HTML image tag into a video tag won’t be added by default (that setting will apply to site pages). To get around this, when editing a knowledge base article:
- Adjust the HUBL tag replacement as indicated in previous sections (in the “Write” tab)
- Click the tab “Settings”, and scroll down
- Open “Advanced options”
- Paste the code snippets mentioned in the setup section in the “Header HTML” textarea for “Additional code snippets”
- Take similar validation steps as to a web page or a blog page
