HubSpot Video and Vidyard Update

cacosta
HubSpot Product Team

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, however, HubSpot is offering a free-of-charge update to be completed by one of our partners. You can give HubSpot permission to migrate your videos for you from your files tool here. You can read more about this option here.

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. Modify the Vidyard embed code using these parameters to reimplement any appearance customization (ie colors) that had been chosen on the page.
  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 would require access to the associated Vidyard account, but Lynton Web will have these same embed codes accessible in the migration file.

 

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. 

 

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. 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.

General details about using the cookie banner are here: https://knowledge.hubspot.com/reports/customize-your-cookie-tracking-settings-and-privacy-policy-al... and here https://developers.hubspot.com/docs/api/events/cookie-banner?_ga=2.98437151.1022404127.1634570100-1... , 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-v....

You should be able to include a snippet like this in the page footer to integrate the two, though you’ll need to debug this to ensure it’s being used correctly on each page where it’s used:

 

 

 

window._hsq.push(['addPrivacyConsentListener', function(consent) {

      if (window.vidyardEmbed && window.vidyardEmbed.api) {

    VidyardV4.api.GDPR.consent(consent.categories.analytics)

      }

    }]);

 

 

 

 

You must also include the data-gdpr_enabled="1" attribute in all of that portal’s video placeholder <img /> elements.

 

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.

 

 

5 Replies 5
GHoward
Member

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

0 Upvotes
cacosta
HubSpot Product Team

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
isabellweiss
Contributor | Diamond Partner

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

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?

isabellweiss
Contributor | Diamond Partner

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