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