How to include feature videos in your NationBuilder feature slider

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!

View the Live Example

Relevant Files

HTML: _features.html
SCSS: _feature_video_styles.scss
JS: videomodal.js
img: x.png, loadingiframe.gif

The problem?

The standard NationBuilder feature slider doesn’t support videos:

The solution?

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

2. In the theme.scss file, import the _feature_video_styles.scss partial.

A screenshot of the theme.scss file (the new line to add is the final one visible in this image) or you can copy these styles in your own scss file.

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

Add this JavaScript file directly before the closing </body> tag in the layout.html file

4. If you are using YouTube add the label of the featured content slider as “youtube | id” and for Vimeo add it as “vimeo | id”. The id of a youtube video can be found in the link following the “watch?v=” and for Vimeo the video id is also in the link following “vimeo.com/”.

Youtube example

5. In the backend, upload the image to accompany your video. This will be the image that appears in the slider. The video will appear and autoplay in a responsive popup modal when that image is clicked. If you are using YouTube a useful shortcut to get video thumbnails is by adding the video id (everything in the link after “watch?v=”) to this link instead of “HERE” http://img.youtube.com/vi/HERE/maxresdefault.jpg

Here is the live example site, visible at http://learn.codenation.com/feature_video

Get the code

View the Live Site


The videomodal.js is an modified version of the open source version by Responsive. Have any questions about how all this works? We’re always happy to help info@codenation.com