STYLE OPTIONS

10 Predefined Color Schemes

CHOOSE YOUR COLOR SKIN


CHOOSE YOUR LAYOUT STYLE

Patterns for Boxed Version

Images for Boxed Version


×

Revolution Slider

Video BGdocumentation 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!


  • video_forest
    This is a fullscreen
    embed video
    - Atropos -

The HTML5 Covering Video Background

In case you wish to Cover the Background with a HTML5 Video, you can do so, using a HTML5 Video Caption and set its parameters to force the Covering.

For Best Result, set the First Frame of the HTML5 Video as "Poster Image" for the video, and also set the Main Background as the Same Image, for smooth Transitions

The best if you Let it Restart every time the Slides starts, so the Frame of the Animation and the first Frame of Video is same.

How does a Slide Markup Looks like then ?

<!-- SLIDE  -->
<li data-transition="slidehorizontal" data-slotamount="7" data-masterspeed="1000"  data-fstransition="fade" data-fsmasterspeed="1000" data-fsslotamount="7">
	<!-- MAIN IMAGE -->
	<img src="images/video_forest.jpg"  alt="video_forest"  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat">
	<!-- LAYERS -->

	<!-- LAYER NR. 1 -->
	<div class="tp-caption tp-fade fadeout fullscreenvideo"
		data-x="0"
		data-y="0"
		data-speed="1000"
		data-start="1100"
		data-easing="Power4.easeOut"
		data-endspeed="1500"
		data-endeasing="Power4.easeIn"
		data-autoplay="true"
		data-autoplayonlyfirsttime="false"
		data-nextslideatend="true"
		data-forceCover="1"
		data-dottedoverlay="twoxtwo"
		data-aspectratio="16:9"
		data-forcerewind="on"
		style="z-index: 2">


		 <video class="video-js vjs-default-skin" preload="none" width="100%" height="100%"
		poster='images/video_forest.jpg' data-setup="{}">
		<source src='http://goodwebtheme.com/previewvideo/forest_edit.mp4' type='video/mp4' />
		<source src='http://goodwebtheme.com/previewvideo/forest_edit.webm' type='video/webm' />
		<source src='http://goodwebtheme.com/previewvideo/forest_edit.ogv' type='video/ogg' />
		</video>

	</div>
</li>

Initialise the Plugin somewhere in the Body Footer:

<script type="text/javascript">
		var revapi;

		jQuery(document).ready(function() {

			   revapi = jQuery('.tp-banner').revolution(
				{
						delay:9000,
						startwidth:1170,
						startheight:500,
						fullScreen:"on",
						forceFullWidth:"on",
						minFullScreenHeight:"320",
						videoJsPath:"assets/plugins/revolution-slider/videojs/",
						fullScreenOffsetContainer: "header"
				});

		});	//ready
</script>