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
img: x.png, loadingiframe.gif
The standard NationBuilder feature slider doesn’t support videos:
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.
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/”.
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
The videomodal.js is an modified version of the open source version by Responsive.