STYLE OPTIONS

10 Predefined Color Schemes

CHOOSE YOUR COLOR SKIN

CHOOSE YOUR LAYOUT STYLE

Patterns for Boxed Version

Images for Boxed Version

×

Revolution Slider

Videodocumentation exmaple

This example is provided by the vendor. This is also included on purchased version!
You can easy edit any example using caption & transition editor.
Revolution Slider - one of the most powerful available sliders!

  • slidebg1
    VIMEO
  • slidebg1
    YOUTUBE
  • slidebg1
    FULLSCREEN VIDEO

How to Embed Videos in the Slider ?

You can embed Vimeo, YouTube and HTML5 Videos as Video Captions. Within a video you can set autoplay, autoplay only first time, loop (html5), nocontrol(html5), thumbnails for videos, fullscreen or predefined size.

Important options in Plugin Initialisation:

<script type="text/javascript">
var revapi;
jQuery(document).ready(function() {
	   revapi = jQuery('.tp-banner').revolution(
		{
			delay:9000,
			startwidth:1170,
			startheight:500,
			hideThumbs:10,
			videoJsPath:"assets/plugins/revolution-slider/videojs/"

		});
});
</script>

YouTube Example - AutoPlay and Next Slide at End of the Video turned on

<div class="tp-caption sft customout"
	data-x="center" data-hoffset="134"
	data-y="center" data-voffset="-6"
	data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
	data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
	data-speed="600"
	data-start="1000"
	data-easing="Power4.easeOut"
	data-endspeed="500"
	data-endeasing="Power4.easeOut"
	data-autoplay="true"
	data-autoplayonlyfirsttime="false"
	data-nextslideatend="true"
>
	<iframe src='http://www.youtube.com/embed/T8--OggjJKQ?enablejsapi=1&html5=1&hd=1&wmode=opaque&controls=1&showinfo=0;rel=0;' width='640' height='360'
			   style='width:640px;height:360px;'>
	</iframe>
	
</div>

Vimeo Example - AutoPlay on First Time and Next Slide at End of the Video turned on.

<div class="tp-caption sft customout"
	data-x="center" data-hoffset="134"
	data-y="center" data-voffset="-6"
	data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
	data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
	data-speed="600"
	data-start="1000"
	data-easing="Power4.easeOut"
	data-endspeed="500"
	data-endeasing="Power4.easeOut"
	data-autoplay="true"
	data-autoplayonlyfirsttime="true"
	data-nextslideatend="true"
>
	<iframe src='http://player.vimeo.com/video/76512663?title=0&byline=0&portrait=0;api=1' width='640' height='360'
			   style='width:640px;height:360px;'>
	</iframe>
	
</div>

HTML5 Example - Autoplay On, Loop but with Controls, and in Fullscreen.

<div class="tp-caption sft customout fullscreenvideo"
	data-x="center" data-hoffset="134"
	data-y="center" data-voffset="-6"
	data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
	data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
	data-speed="600"
	data-start="1000"
	data-easing="Power4.easeOut"
	data-endspeed="500"
	data-endeasing="Power4.easeOut"
	data-autoplay="true"
	data-autoplayonlyfirsttime="true"
	data-nextslideatend="true"
>
	<video class="video-js vjs-default-skin" preload="none" loop  controls width="100%" height="100%"
		  poster="http://video-js.zencoder.com/oceans-clip.png"
		  data-setup="{}">
		<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
		<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
		<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
		<track kind="captions" src="assets/plugins/revolution-slider/videojs/demo.captions.vtt" srclang="en" label="English" />
	  </video>
	
</div>

YouTube Example - With Thumbnail Image over Video

<div class="tp-caption sft customout"
	data-x="center" data-hoffset="134"
	data-y="center" data-voffset="-6"
	data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
	data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
	data-speed="600"
	data-start="1000"
	data-easing="Power4.easeOut"
	data-endspeed="500"
	data-endeasing="Power4.easeOut"
	data-autoplay="true"
	data-autoplayonlyfirsttime="false"
	data-nextslideatend="true"
	data-thumbimage="images/bg3.jpg"
>
	<iframe src='http://www.youtube.com/embed/T8--OggjJKQ?enablejsapi=1&html5=1&hd=1&wmode=opaque&controls=1&showinfo=0;rel=0;' width='640' height='360'
			   style='width:640px;height:360px;'>
	</iframe>
	
</div>