Video library – design recommendations

Developer Support CMS Development
1

Hi there

I’d like to set up a user-friendly video library for this page: Video Library - ZOO Digital

However, I’m unsure what is possible using HubSpot. It’d be good to have the a main ‘featured’ video with the other videos displayed clearly below.

I could use video screenshots with links to each video, but don’t feel like this would be a good user experience. Any examples or suggested layouts would be great!

Cheers, Jonny

2

Hi JonnyZOO,

I’d recommend making a video gallery with the listing page being a grid. Going either 2 - 4 across (depending on the number of videos you plan to have). You can also use thumbnails for the video placeholder and then when someone clicks a video have it open in a lightbox.

You could create this using HubDB to drive the video listing and then link this with something like FancyBoxv3 (Fancybox | Fancyapps) which would drive the popup video (see the videos section on the link above). Something like that would look pretty nice and should be effective.

-AJ

3

Thanks AJ. Great example.

Do you mind covering how would I implement this?

4

Hi JonnyZoo,

I’ll do my best to write this out but I won’t be able to give you a full working copy/paste solution as it requires variables from HubSpot’s HubDB which is something you would need to get on your end.

Prerequisites for doing this:

Steps to take

  1. Create a HubDB table. Make sure you have columns for the following:
  2. Get FancyBoxV3 and add the JS and CSS files
    • You can add these to the template where your layout will be used by adding them to the header section (in DMv1 it’s under “edit > edit head”)
  3. in your CM you would add code similar to the one below (using the examples from the HubDB Docs)
{% for row in hubdb_table_rows(<YourTableId>)|batch(2,'<div class="span6"></div>') %}
<div class="row-fluid">
 {% for video in row %} 
		<div class="span6">
		 <a data-fancybox href="{{video.vidURLFieldName}}">
		 <div class="vid-wrapper">
		 <div class="vid-img">
		 <img src="{{video.imageFieldName.value}}" />
		 </div>
		 <div class="vid-desc">
		 {{video.texFieldName}}
		 </div>
		 </div>
		 </a>
		</div>
 {% endfor %}
</div>
{% endfor %}

Doing the above essentially will create a 2x2 grid of the videos. The point of the “batch()” filter is that it will grab two at a time and when there is only one to grab it will add another span6 that is empty so there are no layout issues.

Hopefully, this will set you on the correct path for getting this setup.