Avalanche: Videos

  • AVALANCHE SLIDER

  • BACKGROUND VIDEO

Videos

The slider supports YouTube, Vimeo and HTML5 Videos and relies on their respective APIs to control them when scrolled in and out of view. Although the slider will include the APIs automatically and only if necessary, one must still activate the respective javascript APIs for YouTube and Vimeo as shown below. The slider also needs to know that slide should be treated as a video slide, this is done by adding the attribute data-video to the li tag.

IMPORTANT: Using multiple videos will impact performance, so use cautiously.


Vimeo

To activate the Vimeo API, add ?api=1 to the end of the URL as follows:

Example
								
									

YouTube

To activate the YouTube API, add ?enablejsapi=1 to the end of the URL as follows:

Example
								
									

HTML5 Video

No addtional script is required for controlling HTML5 videos, simply include it in the markup. For cross browser compatibility ensure that the video is encoded in .mp4, .webm, and .ogv.

Example
								
									
HTML5 Video and mediaelement.js

Optionally use the popular mediaelement.js player for HTML5 videos along with the Thememountain Snowplayer skin. If using mediaelement.js then the controls can be removed from the video tag. Note: You will need to give the video tag a class or id and pass it to the MedaElement call. Ensure to initialize the MediaElement player prior to the Avalanche Slider.

Example
								
									

To make the player reponsive make sure to specify player video width and height as follows in the MediaElement call:

Example
								
									$( document ).ready( function(){
										$( '.mejsplayer' ).mediaelementplayer({
											videoWidth:'100%'
											videoHeight:'100%'
										});
									});
								
							

Background Video Updated

Avalanche slider now supports HTML5, YouTube and Vimeo background video.

HTML5 Background Video

To set a background video to a slide, add the attribute data-video-bkg to the li tag.

Note: We set the poster attribute of the video tag to a blank png; this is done because the slide is used for the poster image instead.

Example
								
									
  • THIS IS CAPTION 1
YouTube Background Video

To add a YouTube background video to a slide, add the attribute data-video and data-video-bkg-youtube to the li tag.

Note: We recommend to set a slider image as well, as this is the image shown on mobile devices.

Example
								
									
  • THIS IS CAPTION 1
Vimeo Background Video

To add a Vimeo background video to a slide, add the attribute data-video and data-video-bkg-vimeo to the li tag.

Note: We recommend to set a slider image as well, as this is the image shown on mobile devices.

Example
								
									
  • THIS IS CAPTION 1

Aspect Ratio

Avalanche uses the most common ratio (16:9) for determining video size. This ratio can be overriden for individual slides by specifying a unique ratio by using the data-video-ratio attribute and specifying the ratio as a decimal. For example, the ratio 4:3 would be entered as 1.33.

Example
								
									

The slider can also be set to ignore any video aspect ratio and force all videos to fill the full slide width and height. This is done as follows:

Example
								
									$( document ).ready( function(){
										$( '.tm-slider-container' ).avalancheSlider({
											respectRatio:false
										});
									});
								
							

Further Examples
Theme Mountain

Current Version