Other Supported Videos

Basic example of the plugin displaying other types of supported videos.

Fish Frenzy - Oceans Clip (.mp4) by DisneyNature

Fish Frenzy - Oceans Clip (.webm) by DisneyNature

Fish Frenzy - Oceans Clip (.ogv) by DisneyNature

Fish Frenzy - Oceans Clip (.mp4, .webm, .ogv) by DisneyNature

jQuery(function($){
	$(".rvs-container").rvslider();
});
<div class="rvs-container">
	<div class="rvs-item-container">
		<div class="rvs-item-stage">
			<div class="rvs-item" style="background-image: url(https://s3.amazonaws.com/fooplugins/rvs/default.jpg)">
				<p class="rvs-item-text">Fish Frenzy - Oceans Clip (.mp4) <small>by DisneyNature</small></p>
				<a href="https://s3.amazonaws.com/fooplugins/rvs/oceans-clip.mp4" class="rvs-play-video"></a>
			</div>
			<div class="rvs-item" style="background-image: url(https://s3.amazonaws.com/fooplugins/rvs/default.jpg)">
				<p class="rvs-item-text">Fish Frenzy - Oceans Clip (.webm) <small>by DisneyNature</small></p>
				<a href="https://s3.amazonaws.com/fooplugins/rvs/oceans-clip.webm" class="rvs-play-video"></a>
			</div>
			<div class="rvs-item" style="background-image: url(https://s3.amazonaws.com/fooplugins/rvs/default.jpg)">
				<p class="rvs-item-text">Fish Frenzy - Oceans Clip (.ogv) <small>by DisneyNature</small></p>
				<a href="https://s3.amazonaws.com/fooplugins/rvs/oceans-clip.ogv" class="rvs-play-video"></a>
			</div>
			<div class="rvs-item" style="background-image: url(https://s3.amazonaws.com/fooplugins/rvs/default.jpg)">
				<p class="rvs-item-text">Fish Frenzy - Oceans Clip (.mp4, .webm, .ogv) <small>by DisneyNature</small></p>
				<a href="https://s3.amazonaws.com/fooplugins/rvs/oceans-clip.mp4, https://s3.amazonaws.com/fooplugins/rvs/oceans-clip.webm, https://s3.amazonaws.com/fooplugins/rvs/oceans-clip.ogv" class="rvs-play-video"></a>
			</div>
		</div>
	</div>
	<div class="rvs-nav-container">
		<a class="rvs-nav-prev"></a>
		<div class="rvs-nav-stage">
			<a class="rvs-nav-item">
				<span class="rvs-nav-item-thumb" style="background-image: url(https://s3.amazonaws.com/fooplugins/rvs/thumb.jpg)"></span>
				<h4 class="rvs-nav-item-title">Fish Frenzy - Oceans Clip (.mp4)</h4>
				<small class="rvs-nav-item-credits">by DisneyNature</small>
			</a>
			<a class="rvs-nav-item">
				<span class="rvs-nav-item-thumb" style="background-image: url(https://s3.amazonaws.com/fooplugins/rvs/thumb.jpg)"></span>
				<h4 class="rvs-nav-item-title">Fish Frenzy - Oceans Clip (.webm)</h4>
				<small class="rvs-nav-item-credits">by DisneyNature</small>
			</a>
			<a class="rvs-nav-item">
				<span class="rvs-nav-item-thumb" style="background-image: url(https://s3.amazonaws.com/fooplugins/rvs/thumb.jpg)"></span>
				<h4 class="rvs-nav-item-title">Fish Frenzy - Oceans Clip (.ogv)</h4>
				<small class="rvs-nav-item-credits">by DisneyNature</small>
			</a>
			<a class="rvs-nav-item">
				<span class="rvs-nav-item-thumb" style="background-image: url(https://s3.amazonaws.com/fooplugins/rvs/thumb.jpg)"></span>
				<h4 class="rvs-nav-item-title">Fish Frenzy - Oceans Clip (.mp4, .webm, .ogv)</h4>
				<small class="rvs-nav-item-credits">by DisneyNature</small>
			</a>
		</div>
		<a class="rvs-nav-next"></a>
	</div>
</div>

Generator

To help you get started quickly we have created a generator that when supplied a supported video url will generate the necessary HTML, CSS and JavaScript to insert into your page. The generator also lets you create a custom theme and highlight for your slider allowing you to fit it to your sites theme.