• Emily Malone

How to make flexible video carousels in Hubspot

HubSpot (HS) is a great platform to develop SEO-optimised websites and blogs. One of our clients needed a way to showcase their portfolio of corporate videos. I’m going to show you how I implemented Owl Carousel to allow them to create and manage their own content without being hindered by the platform.

They wanted carousels, which, when done right, aren’t completely evil. They have their place. As long as context is given to each slide, and each slide adds value, they provide an intuitive way to navigate content without being swamped by it.

The challenge

The client wanted to have a set number of carousels on their page, but manage the number of items in each carousel. They wanted to be able to add images, videos from Wistia and calls-to-action (CTA’s) at the end of each carousel as a way to give users an onward journey and increase the chances of lead generation.

The solution

Hubspot (HS) templates provide a thing called a ‘flexible column‘ which template designers can add to a template. This then allows a page editor to add/remove and manage modules that sit within the column. So, this would be an ideal way to manage carousel content. For images and CTA’s that’s pretty easy since they are all inbuilt modules. However, how could a wistia hosted video be added, which contains summary information about the video and on click, plays the video in a modal window along with detailed video information and more CTA’s?

Custom modules

HS provides dev’s a way to create their own modules that can be added to templates. So, I created a ‘detailed video panel’ module. From the back office it looks like this…


It’s pretty simple – there are 3 fields

  1. Video Id – this is a valid video id from wistia. This is used in connection with wistia’s own embedding script to pull through the video, video thumbnail and play button.

  2. Panel content – this is a rich text field where editors can add any content they want. When the video plays, a modal is opened and this content appears below the video.

  3. Summary – This content appears just over the video thumbnail and contains just the video title and a short summary line.

The code bit is a mixture of html and hubl (HS markup language). With this, the fields and their values can be referenced from the template. One of the options for wistia embeds is to specify a caption container, which is a referenced div that can contain any markup. Providing the wistia embed script is present on the page…

<script charset="ISO-8859-1" src="https://fast.wistia.com/assets/external/E-v1.js" async></script>

…embed markup will be recognized and processed.

Setting up the carousel

To actually make the carousel, from the template a little bit of config is needed (nothing complicated). Take a look at this…


This shows the design manager of HS. You can see the ‘carousel’ module which is actually a flexible column. The only config needed here is to add the class of ‘owl-carousel’ to that module. To do that, click on the cog icon on the module and add the class.

The only slight complication is that when the template is rendered, the ‘Owl-Carousel’ div is added to the page, but the sub-items are not added immediately as children, there is a span (?!) added as a child with the editor-added modules appearing as children of that. Not quite sure why a span is used as a parent of a div (surely not semantically correct?) but there you go, the wonder of HS. So, to initialise the carousel correctly, I did this…

function afterAction() {
  var visibleItems = this.owl.visibleItems;
  if(visibleItems.length === 3) {

$('.owl-carousel &gt; span').owlCarousel({
  itemsCustom : [
    [0, 1],
    [700, 2],
    [900, 3]
  navigation : true,
  afterAction: afterAction

A couple of points about this – The span immediately inside the ‘owl-carousel’ div is used to initialise the carousel itself. At its largest, it has 3 items showing at once (this ensures there is context and the user has more reason to click on the next/previous arrows) and there is a little function that fires whenever something happens. All this does is add a class of ‘inactive’ to all the visible items and then remove that class from the middle item. The effect is that the middle item can be made more prominent while the side items, whilst still visible, can be de-emphasized.

From the front end

Here’s an initial version…


From the back end

To actually configure the carousel from the page, its just a case of editing the page, and dragging as many ‘detailed video panels’ as required on to the page. Here’s a picture of it


Once its been dragged on to the page, the values can be put in for the video id, panel and summary content.


What would have been nice would be to be able to create a custom module that contains a flexible column, but at present, this isn’t possible in hubspot. If it were, I could have created a ‘carousel’ custom module as well as the ‘video panel’ module. Then, users could just drag a carousel on to an existing flexible column, then drag video panels into the carousel. Hubspot doesn’t support flexible columns within flexible columns. Its a fairly simple task to set up a flexible column and add a class to it but it does require getting into the design manager, and day-to-day content editors won’t necessarily be happy doing that.


While there is an ‘image slider’ module in HS, it only allows images to be added. This solution means that anything can be added including images, videos, calls to action, even forms if you want. It would also be possible via classes to specify configuration for the carousel (number of items, paging, navigation, autoplay etc) but I’ll leave that for another day.

This solution kept the client happy and didn’t break their budget. It now means they can more easily manage their own content and have a play around, rather than being restricted to one way of doing something.

All comments welcome as always!