# SLIDER REVOLUTION - The Responsive Slider Plugin

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18

- The clearest way into the Universe
  is through a forest wilderness.
  John Muir
- The clearest way into the Universe
  is through a forest wilderness.
  John Muir

## 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>