Video Gallery on NationBuilder websites

Add a beautiful and hassle-free video gallery to your site so you can easily share your YouTube magic with your community.

View demo

 

Relevant Files

HTML: _partial_video_gallery.html, pages_show_basic.html, pages_show_basic_wide.html

SCSS: _video_gallery_styles.scss

JS: videomodal.js

 

How to build your video gallery

1. Download the relevant files and upload them to your theme.

2. In the theme.scss file, import the _video_gallery_styles.scss partial (the screenshot below shows how to achieve that).

 

1-Eo3MLlhyIr-PoIfok9xk2A.png

 

3. In the layout.html file, include the JavaScript files just before the closing </body> tag.

 

1-FOn6809bX4Khsr_Z1EX2wA.png

 

4. In the backend, create a basic page with the slug “video_gallery”. Create basic subpages for all your videos, and paste the full YouTube video URL into the content section of each new subpage.

That’s it, you’re done! The order will be determined by the published date of the video subpages. It’s also possible to tweak the code a little if you need a drag and drop tool to order that video gallery.

Get the code

View demo 

 

1-_YMd5EEGNlU4-XiK0DZrtA.png

 

1-SMBTPYVjvXx3gbVjXAq3_w.png

 

The videomodal.js file is a modified version of the awesome Responsive plugin.