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:

 

1-wQnF4B0jkxQfz8ETrYkXFg.png

The solution?

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

 

1-g3jtyc8eL-HnkbJQ47JK2A.gif

1-9DSmILSsoMThivtNxBd89g.png

 

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

 

1-KLwrJ85HkpucQEp_JV1f1A.png

 

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

 

1-0B8-vXJoSO6EM7qZ458a2g.png

  

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

 

1-Pmb4Z3M_6zcNb5C2a8Ddsw.png

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

 

1-AWauHOVMMbHfFCTwtGaohg.png

Get the code

View demo

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