Add a Video Gallery to your NationBuilder site

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

Add a Video Gallery to your NationBuilder site
NOTE: You'll need to create a custom theme for your NationBuilder site if you don't already have one.

Relevant Files

  1. _partial_video_gallery.html
  2. pages_show_basic.html
  3. pages_show_basic_wide.html
  4. _video_gallery_styles.scss
  5. videomodal.js
    (this is a modified version of the excellent Responsive plugin)

How to build your video gallery

Step 1.

Click the “get the code” button above, download the relevant files and upload them to your theme.

Step 2.

Open the theme.scss file of your custom theme and include the _video_gallery_styles.scss partial directly below the existing @import statements, using the line below:

@import "video_gallery_styles;"

Step 3.

Open the layout.html file of your custom theme and include the JavaScript file by adding the following line of code before the closing </body> tag:

<script type="text/javascript" src="videomodal.js"></script>

Step 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! When a thumbnail image is clicked the video opens in a modal popup, as shown in the screenshot below:

Example video playing in the modal popup

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.

Have any questions? We're always happy to help
Get in touch on email: