Marketing Integrations

cacosta
HubSpot Product Team
HubSpot Product Team

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

cacosta_0-1635185159650.png

 

Remains unchanged, continues being hosted by Vidyard

Raw Vidyard embed code pasted using HubSpot Video Module’s “Embed Code” option

cacosta_1-1635185159611.png

 

Remains unchanged, continues being hosted by Vidyard

Inserted using HubSpot Video picker in Rich Text area

cacosta_2-1635185158767.png

 

EITHER:

  • Needs to be replaced with equivalent Vidyard embed code (above), OR
  • Content needs to be redesigned to allow use of the Vidyard Media Bridge module

Selected using HubSpot Video Module’s “HubSpot Video” option

cacosta_3-1635185159652.png

 

EITHER:

  • Needs to be manually replaced with equivalent Vidyard embed code (above), OR
  • Needs to be manually replaced with Vidyard Media Bridge Module

Raw HubL

cacosta_4-1635185158523.png

 

EITHER:

  • Needs to be replaced with equivalent Vidyard embed code (above), OR
  • Content needs to be redesigned to allow the use of the Vidyard Media Bridge module




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.

 

  1. Identify the video on the page that you want to replace with its Vidyard embed code

 

  1. 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.
  2. Use Vidyard’s tools to add any CTAs or Forms that you wish to show in the video.
  3. Delete the original video from the rich text area.
  4. Insert a new video in the rich text area by pasting the embed code you copied earlier.
  5. You can customize your video player settings in Vidyard to re-implement any appearance customization (e.g. colors).
  6. 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.

  1. Identify the video on the page that you want to replace with its Vidyard embed code
  2. Identify the Vidyard video corresponding to this file (in the migration file in the portal’s Files tool) and copy its embed code.
    1. 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.
  3. Use Vidyard’s tools to add any CTAs or Forms that you wish to show in the video.
  4. In the video module, select “Embed” rather than “HubSpot Video”. Then, select “Embed Code”
  5. Paste the embed code you copied earlier into the video module.
  6. Modify the Vidyard embed code using these parameters to reimplement any appearance customization (ie colors) you’d chosen on your page.
  7. 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

  1. 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.
  2. Confirm that it is present in the “connected apps” section of the HubSpot Marketplace for the portal.
  3. Identify the video module or the video in the rich text area that you wish to replace.
  4. Remove it
  5. Add a Vidyard Video module to the same area on the page. See Vidyard’s instructions on how to use the Media Bridge Module. 
  6. 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.
    1. 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.
  7. 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.

 

  1. 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
  2. Identify the video on the page that you want to replace with its Vidyard embed code
  3. Obtain the Vidyard embed code corresponding to this video. 
    1. You may do this either from the HubSpot-supplied list of pages and embed codes, OR
    2. 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: 
  4. Use Vidyard’s tools to add any CTAs or Forms that you wish to show in the video.
  5. Delete the original video_player HubL tag
  6. Insert a new video area by pasting the embed code you copied earlier exactly where the HubL had been.
  7. Modify the Vidyard embed code using these parameters to reimplement any appearance customization (ie colors) that had been chosen in the page.
  8. 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:

  1. Option 1: Update the pages where the video module is used.
    1. 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.
    2. 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.
  2. Option 2: Clone the Design Manager module and change the video field with a text field.
    1. Cloning the module and swapping it in each of the pages will guarantee that the styles are untouched.
    2. Please do not delete the old module.
    3. The text field should be used for the external UUID for the video
    4. 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).
    5. 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.
  3. Option 3: Clone the Design Manager module and change the video field with an embed field.
    1. This option is identical to option 2, but uses an embed field rather than a text field.
    2. 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:

  1. 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.
  2. 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. 
  3. 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:

  1. Adjust the HUBL tag replacement as indicated in previous sections (in the “Write” tab)
  2. Click the tab “Settings”, and scroll down
  3. Open “Advanced options”
  4. Paste the code snippets mentioned in the setup section in the “Header HTML” textarea for “Additional code snippets”
  5. Take similar validation steps as to a web page or a blog page

 

 

isabellweiss
Contributor | Diamond Partner
Contributor | Diamond Partner

HubSpot Video and Vidyard Update

Hi @cacosta thanks a lot for your reply! Please find my answers below:

 

1) Thanks!

2) Got it, makes sense. 

3) By "normal" videos, I meant videos with visual content and no advanced features. But I think I understand the process now, thanks for clarifying.

4) No, no special features in particular, again I just wanted to understand the process a bit better.

 

Many thanks for your help. 🙂 

 

Best,

Isabell

0 Upvotes
isabellweiss
Contributor | Diamond Partner
Contributor | Diamond Partner

HubSpot Video and Vidyard Update

Hi @cacosta thanks for these insights. I have a few questions, where I need more clarification: 

 

1) How can I find out, which videos in the file manager are hosted on Vidyard and which on HubSpot? 

2) Only videos that use the advanced Vidyard features like CTAs need to be updated, correct?

3) If we have "normal" videos that are currently in the file manager they will be automatically copied to HubSpot video and we don't have to take action or change anything, correct?

4) If we don't take action before February 2022 all Vidyard videos will be copied to HubSpot video and advanced features then might be lost? Correct?

 

Thanks in advance!

 

Best,

Isabell

0 Upvotes
cacosta
HubSpot Product Team
HubSpot Product Team

HubSpot Video and Vidyard Update

Hi @isabellweiss , thanks for the questions!

 

1) How can I find out, which videos in the file manager are hosted on Vidyard and which on HubSpot? On your portal, you can find the list of videos that need attention and are being used in content here.  Each portal has a file showing all of the videos that are NOT already using Vidyard embed codes, and that are being used in content.

 

2) Only videos that use the advanced Vidyard features like CTAs need to be updated, correct? Not necessarily. Any video that currently has "advanced features enabled" in your file picker in HubSpot would need to be updated if you wish to manage them in Vidyard moving forward. It depends on how you have your videos setup - happy to elaborate more here if necessary.

 

3) If we have "normal" videos that are currently in the file manager they will be automatically copied to HubSpot video and we don't have to take action or change anything, correct? Can you clarify what you mean by "normal" videos here? My answer is based on "normal" videos being videos currently used anywhere in content (videos that have "advanced features" enabled in the HubSpot file picker". If so, the answer here is that it depends. If a portal has a paid Vidyard subscription, unless a portal opts-in to migration, HubSpot will update their videos to the new video service automatically later in Q1 2022. If a portal does not have a paid Vidyard subscription, they do not need to take any action either for us to update their videos to the new video service. The only situation in which a portal needs to take action is if they want to update the videos themselves and/or opt-in to migration to be able to manage videos in Vidyard.

 

4) If we don't take action before February 2022 all Vidyard videos will be copied to HubSpot video and advanced features then might be lost? Correct?

For all videos currently in HubSpot video, previously powered by Vidyard, correct. If there are videos only in your Vidyard account that are not anywhere in HubSpot we'd not be able to migrate them to the new service. In terms of "advanced features" being lost, again it depends. We will retain all features that currently exist in HubSpot Video such as Forms & CTAs, but any features that currently exist only as part of the Vidyard paid subscription would not be retained. Are there specific features you are wondering about?

GHoward
Member

HubSpot Video and Vidyard Update

If we continue to use Vidyard embed codes, will analytics and percent watched data still be available in Hubspot? 

cacosta
HubSpot Product Team
HubSpot Product Team

HubSpot Video and Vidyard Update

hey @GHoward ,

Once HubSpot switches to the new video service if you continue to use Vidyard embed codes you'd need to use Vidyard for analytics on those videos. One of the exceptions to this is if you decide to use Vidyard's new Media Bridge module (described here  ). With this new module you'd be able to view any events Vidyard pushed into HubSpot's custom report builder for analytics. 

0 Upvotes