---
title: HubSpot's New Advanced Video Module - hsVideoApi
description: This is the meta description of your first post.
---

[Design, Code, Adventure - A HubSpot Developer Blog and Other Things](https://blog.amandamcintosh.design)

# [HubSpot's New Advanced Video Module - hsVideoApi](https://blog.amandamcintosh.design/hubspot/hs-video-api)

 Written by [Amanda McIntosh](https://blog.amandamcintosh.design/author/amanda-mcintosh) | Jan 27, 2023 11:25:37 PM

Hello! I'm sorry this sad, unformatted blog post is all you find when you search for, "hsVideoAPI" - I spent a little bit too long looking for information about hsVideoApi when I needed to build an auto-playing video modal, so I tried to pull together all of the resources I found into this post to make life a little easier.

[Here's a post on the HubSpot community forum requesting documentation for this tool. Please go upvote it!](https://community.hubspot.com/t5/HubSpot-Ideas/Add-API-for-Hubspot-Video/idi-p/712748) 

Update December 12th, 2023:

It looks like HubSpot's refactored this code without providing any documentation, and the ability to post a message to a player appears to be modified/removed. 

On the plus side,

`hsVideoApi.getPlayer('- video id here -');`

appears to return the video instance now, so when they give us back the ability to play a video on modal open, you don't need to select your video form the getPlayers array.

---

Here's an attempt to dissect the source code for this new API, as of January 29th, 2022:

HubSpot's new video embeds load the thumb in the page, then hide it in favor of an iFrame containing the thumbnail, video and their new video analytics. To play/pause the video, you can use hsVideoApi to manipulate the iframe. 

##### Some guidelines that may or may not be valid:

1. Use Window.onLoad vs document.addEventListener('DOMContentLoaded')
2. HubSpot automagically pauses other videos when you play a video

##### Functions that appear to be built in to hsVideoApi:

`getPlayer: ƒ w(e) getPlayers: ()=>Le(v()) pauseAllPlayers: ƒ _() registerPlayer: ƒ d(...e) renderPlayer: ƒ m(e,t) updatePlayer: ƒ g(e,t)`

As far as I can tell, getPlayer() doesn't do anything useful yet - I would guess that HubSpot will eventually allow you to do something like, `hsVideoApi.getPlayer('');`but it doesn't look like that functionality is enabled yet. 

##### Get a video with a particular parent element:

`var allVideoPlayers = window.hsVideoApi.getPlayers(); function returnVideoUsingParent ( allVideos, parentClassString ) {   let video   allVideos.forEach((el) => {``    if (el.iframeEl.closest(parentClassString) != null) {       video = el    ``}   })   return video } returnVideoUsingParent(allVideoPlayers, "[PUT YOUR PARENT CLASS HERE]")`

##### Play a video:

 

`function playVideo ( video ) {   video.postMessageToPlayer("SET_PLAYER_STATUS", {     status: "PLAYING"   })``}`

 

##### Pause a video:

`function pauseVideo ( video ) {   video.postMessageToPlayer("SET_PLAYER_STATUS", {     status: "PAUSED"   })``}`

##### Give Stuart some love on the dev slack for figuring this out for us

 

 

 

<https://hubspotdev.slack.com/archives/CBA9UA4EN/p1663275241467839>

##### Nick Decker put this up on his GitHub as a snippet, which you can highlight below:

Hope this helps! I'm not a big blog writer, but I'll add to this when I have time :-)

[View full post](https://blog.amandamcintosh.design/hubspot/hs-video-api)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Amanda McIntosh"
  },
  "dateModified" : "2023-12-12T17:54:08.464Z",
  "datePublished" : "2023-01-27T23:25:37Z",
  "headline" : "HubSpot's New Advanced Video Module - hsVideoApi",
  "image" : {
    "@type" : "ImageObject",
    "height" : 60,
    "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
    "width" : 60
  },
  "mainEntityOfPage" : "https://blog.amandamcintosh.design/hubspot/hs-video-api",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60,
      "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
      "width" : 60
    },
    "name" : "Design, Code, Adventure"
  }
}
```