How to include feature videos in your NationBuilder feature slider

View demo Get the code


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 client's 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.




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




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 “”.



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”



Get the code

View demo

The videomodal.js is an modified version of the open source version by Responsive.

We love hearing about upcoming projects and campaign ideas. Get in touch to request a free consultation today!

Contact us