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>