Render api content on external site - video tags?

Developer Support APIs & Integrations
1

Im trying to render a hubspot blog article on an external site. We export them with the blog api first. Some of the blog content is using special tag with HubL syntax so they need to be rendered differently.

I found a way to render the CTAs based off the code {{cta(‘id’}} but the video tag eludes me ({% video_player .. %}).

How do I embed the video based off of this tag?

Is there some javascript library that can automatically convert these tags to real content, or how are you supposed to get it?

2

Hey, @CW8 :waving_hand: Welcome to our community! Thanks for reaching out.

I don’t have the full answer and I’m happy to brainstorm with you. Here’s what I found for us:

  • I’m assuming the videos you are after are hosted in the File Manager
  • These files all have an ID
  • The HubL Tags documentation shows the following for `player_id`
    The player_id of the video to embed. Returned at GET /filemanager/api/v2/files/:file_id in the meta.video_data.hosting_infos dict.
  • Which links to this endpoint Get file metadata

There isn’t a HubSpot documented JS library that will do this automatically. I didn’t find a reference to a method “convert” the HubL back into a version of an embeddable video player.

Here’s a potential approach:

  • Use the above endpoint to retrieve the file metadata for the video
  • Extract the relevant information, such as the video source URL
  • Manually create an HTML embed code for the video. You can use the standard HTML5 video tag or a custom player, depending on your needs
  • Consider using a third-party JavaScript library like Plyr or Video.js for a more customizable and consistent video player experience

This approach is likely not efficient, and it may spark another scaleable solution.

Have fun building! — Jaycee