Include videos in your NationBuilder feature slider

Include videos from YouTube and Vimeo through NationBuilder’s standard slider tool.

Include videos in your NationBuilder feature slider
NOTE: You'll need to create a custom theme for your NationBuilder site if you don't already have one.

Update your slider to support Youtube & Vimeo

We love using videos in feature content sliders for our clients’ sites and decided we would share the way we include videos from YouTube and Vimeo through NationBuilder’s standard slider tool. Our improved _features.html makes it easy to add a great looking video modal. Want to have a mix of images that trigger videos and other images that link to pages? No problems!

Relevant Files

  1. _features.html
  2. _feature_video_styles.scss
  3. videomodal.js
    (this is a modified version of the excellent Responsive plugin)
  4. x.png
  5. loadingiframe.gif

The problem

The standard NationBuilder feature slider doesn’t support videos:

NationBuilder slider with no video support

The solution

Step 1

Download these 3 files and save the two images below. Upload them all to your theme.

loadingiframe.gif

x.png

Step 2

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

@import "feature_video_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

If you are using YouTube, then add the label of the featured content slider as youtube | [ID]. For Vimeo set the label to vimeo | [ID]. In either case make sure to replace the [ID] element with the value for your chosen video. The ID of a youtube video can be found in the URL following watch?v=. The video ID is also containd in each Vimeo URL, directly following vimeo.com/. You can see an example label for a YouTube video in the screenshot below:

Youtube example

Step 5

Finally, upload the image you wish to accompany your video. This will display in the slider as usual. The video will appear and autoplay in a responsive popup modal when the image is clicked. If you are using YouTube a useful shortcut to find a possible video thumbnail is to add the video ID to the following link instead of the word “HERE”: http://img.youtube.com/vi/HERE/maxresdefault.jpg


Have any questions? We're always happy to help
Get in touch on email: info@codenation.com