Hello Design Community. I want to create a page like this: The Napkin Guys | Business Consulting Video Series
Ever since HubSpot changed the design area, I am lost. I want the columns where the videos are to be custom columns so I can add videos as we make them. There will be a total of 12. Does anyone have any suggestions? Help?
Thanks
Hi @ErinKas,
This has actually never been easier.
1. right click the folder you would like this module to live in. I use a ‘modules’ folder in my root templates folder for the template set I am working on.
2. Check ‘page’ and/or ‘blog’ then name the module, like ‘Video Library’.
3. This will open the module editor. There is an HTML section, a CSS section, and a javascript section. The right side bar is where you create your editable fields. You will want to code your module here.
<div class="video-library">
<div class="vl-page_center">
<div class="vl-grid">
<div class="vl-item">
<!-- your video assets go here -->
</div>
</div>
</div>
</div>
.vl-grid will contain your gallery, .vl-item will wrap each item in your gallery.
.vl-grid {
display: flex;
-webkit-display: flex;
-moz-display: flex;
-ms-display: flex;
-o-display: flex;
align-items: center;
-webkit-align-items: center;
-moz-align-items: center;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
}
.vl-item {
width: 25%;
box-sizing: border-box;
padding: 2%;
}
that should create the structure.
4. now you need a repeater field. This is going to be a group of fields that belong inside vl-item, and will exist for each item in the grid. You will use the left side bar for this.
You are going to have to choose if you want to use embeds (youtube, vimeo, etc.) in your popup or if you are going to use html5 and source the video files from your file manager. Wistia Videos comes with a popup embed code that would make your life a lot easier.
.vl-item is going to contain:
i. The thumbnail image
ii. The title
iii. the video
So for each item you need an image field and a text field for the title. If your video is embeds then a text field will work here otherwise you will need to build out an html5 player and create a file field for each required video file type (.ogg, .mp3, .webm).
5. Create your markup inside .vl-item:
<div class="vl-item">
<a href="#" class="vl-pop"> <img src="thumbnail.jpg" alt=""> </a>
<h3>Video title</h3>
<div class="vl-popup" style="display: none">
<!-- your popup code goes here -->
</div>
</div>
If your using wistia you only need to wrap the img tag in the link provided and the scripts provided will create the popup.
6. group the fields, then at the bottom of the group settings turn on the repeater and set a default number of items.
7. at the top of the group settings You’ll see a link titled “Copy” with a down arrow. click there and choose copy snippet.
I paste my snippets above my html then copy and paste the values to where the should exist. In most cases I don’t want image size control options so I turn that off on my image fields and omit the attributes from the image tag in the snippet as well. also, for text fields at least, you want the token that starts and ends in double curlys: {{ this is a token }} so I copy those out of the snippet. Because it is a repeater field you will be working with a for loop. Just make sure that .vl-item is the outer most parent inside the loop:
<div class="vl-grid">
{% for foo in bar %}
<div class="vl-item"> <a href="#" class="vl-pop"> <img src"{{ image.src.token }}" alt="{{ image.alt_text.token }}"> </a> <h3>{{ title.text_field.token }}</h3> </div> {% endfor %} </div>
if you pasted the snippet into the text editor to copy and paste like I do, be sure to delete it back out after you are finished. If you set default content to your fields you can click preview and you should see the grid.
8. The rest is a javscript issue and the only way to solve it is to know how you plan to implement the videos. I built this video gallery here using html5 video and the old design manager. Playing with video can be a bit tricky and cumbersome. Here is the code from that site:
<div class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_custom_widget" data-hs-cos-general-type="widget" data-hs-cos-type="custom_widget" id="hs_cos_wrapper_widget_1507460654710" style="">
<div class="video_page_video_wrap">
<h3>Social, Mobile<br>
Engagement</h3>
<a class="video_link" href="#" onclick="popup_video(this)"><img alt="thumbnail_agile.png" src="thumbnail.jpg"></a>
<div class="video_container">
<div class="video_wrap">
<div class="video_close">
X Close
</div>
<video class="step_video" controls="" loop="" preload="none">
<source src="video.mp4" type="video/mp4">
<source src="video.mp4" type="video/webm">
</video>
</div>
</div>
</div>
</div>
function popup_video(b) {
var c = $(b).siblings(".video_container");
var a = c.children(".video_wrap");
var d = c.find(".step_video").get(0);
var e = c.find(".video_close");
d.load();
c.show();
d.play();
e.on("click touch", function() {
c.hide();
d.pause()
});
if (c.is(":visible")) {
$(c).on("click touch", function(f) {
f.preventDefault();
c.hide();
d.pause()
});
a.on("click touch", function(f) {
f.stopPropagation()
})
}
};
Need help? Hire Us Here
@Jsum, props to the thoroughness of your answer!
@Jsum thank you so much for that wonderful response. I have read through it but I fear I do not have enough development experience to create that library. Any idea if you are able to use the new vidyard hosting that HubSpot has with it? Thats what I need.
I purchased a module from the marketplace however, it doesnt work with the new capability that HubSpot has with Video Hosting and Vidyard. 
We really wanted that since you can have the form live in the video and thats how we were planning on gating them.
Any thoughts?
@ErinKas what I gave you is pretty much copy and paste so I would probably suggest you hire someone to just knock this out for you really quick. It shouldn’t take more than a couple of hours to build a module like this which tanslates to a couple hundred bucks to get what you want, quickly, and without the headache.
Need help? Hire Us Here