# Video library – design recommendations

**URL:** <https://community.hubspot.com/t/video-library-design-recommendations/8597>\
**Category:** CMS Development\
**Created:** [April 23, 2018, 8:58am UTC](https://community.hubspot.com/t/video-library-design-recommendations/8597 "2018-04-23T08:58:53Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![JonnyZOO](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jonnyzoo/32/101739_2.png) [@JonnyZOO](https://community.hubspot.com/u/JonnyZOO)\
**Post date:** [April 23, 2018, 8:58am UTC](https://community.hubspot.com/t/video-library-design-recommendations/8597/1 "2018-04-23T08:58:53Z")

</div>

Hi there

I’d like to set up a user-friendly video library for this page: [Video Library - ZOO Digital](https://www.zoodigital.com/investors/video-library)

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

---

<div class="post-metadata">

**Author:** ![AJLaPorte\_diagr](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ajlaporte_diagr/32/24548_2.png) [@AJLaPorte\_diagr](https://community.hubspot.com/u/AJLaPorte_diagr)\
**Post date:** [April 23, 2018, 6:28pm UTC](https://community.hubspot.com/t/video-library-design-recommendations/8597/2 "2018-04-23T18:28:00Z")

</div>

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](http://fancyapps.com/fancybox/3/)) 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

---

<div class="post-metadata">

**Author:** ![JonnyZOO](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jonnyzoo/32/101739_2.png) [@JonnyZOO](https://community.hubspot.com/u/JonnyZOO)\
**Post date:** [April 24, 2018, 8:04am UTC](https://community.hubspot.com/t/video-library-design-recommendations/8597/3 "2018-04-24T08:04:00Z")

</div>

Thanks AJ. Great example.

Do you mind covering how would I implement this?

---

<div class="post-metadata">

**Author:** ![AJLaPorte\_diagr](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ajlaporte_diagr/32/24548_2.png) [@AJLaPorte\_diagr](https://community.hubspot.com/u/AJLaPorte_diagr)\
**Post date:** [April 24, 2018, 2:31pm UTC](https://community.hubspot.com/t/video-library-design-recommendations/8597/4 "2018-04-24T14:31:31Z")

</div>

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:

- HubDB (you can see if you have this by going to **content \> website pages** then looking for the “more tools” drop-down and choosing HubDB)
- Knowledge of HubDB - [HubDB - HubSpot docs](https://designers.hubspot.com/docs/tools/hubdb)
- A license for FancyBoxv3 ($29 - one-time fee for one website) - [https://sites.fastspring.com/fancyapps/instant/fancybox\_single\_commercial\_license](https://sites.fastspring.com/fancyapps/instant/fancybox_single_commercial_license) - You can use it for eval first to see if you want it by just adding the files from their homepage listed in step 1 on their site.

Steps to take

1. Create a HubDB table. Make sure you have columns for the following:
  - Video URL [type:URL] (ex: [https://www.youtube.com/watch?v=ud59k8OUV\_4)](https://www.youtube.com/watch?v=ud59k8OUV_4) )
  - Video Thumbnail [type: IMAGE]
  - Video Description [type: TEXT or RICHTEXT

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)

```auto
{% 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.