Main Slider Video

Hello,

Both Revolution Slider: http://themes.semicolonweb.com/html/canvas/slider-revolution.html and Canvas Swiper Slider: http://themes.semicolonweb.com/html/canvas/index.html (Video can be moved to the First Slide) should work fine in this case. But we would recommend using the Canvas Swiper Slider as it is lighter, smoother and can be more easily configured. Example:

<section id="slider" class="slider-element slider-parallax swiper_wrapper min-vh-60 min-vh-md-100 include-header">
	<div class="slider-inner">

		<div class="swiper-container swiper-parent">
			<div class="swiper-wrapper">
				<div class="swiper-slide dark">
					<div class="container">
						<div class="slider-caption slider-caption-center">
							<h2 data-animate="fadeInUp">Beautifully Flexible</h2>
							<p class="d-none d-sm-block" data-animate="fadeInUp" data-delay="200">Looks beautiful & ultra-sharp on Retina Screen Displays. Powerful Layout with Responsive functionality that can be adapted to any screen size.</p>
						</div>
					</div>
					<div class="video-wrap">
						<video id="slide-video" poster="images/videos/explore-poster.jpg" preload="auto" loop autoplay muted>
							<source src='images/videos/explore.webm' type='video/webm' />
							<source src='images/videos/explore.mp4' type='video/mp4' />
						</video>
						<div class="video-overlay" style="background-color: rgba(0,0,0,0.55);"></div>
					</div>
				</div>
				<div class="swiper-slide dark">
					<div class="container">
						<div class="slider-caption slider-caption-center">
							<h2 data-animate="fadeInUp">Welcome to Canvas</h2>
							<p class="d-none d-sm-block" data-animate="fadeInUp" data-delay="200">Create just what you need for your Perfect Website. Choose from a wide range of Elements & simply put them on your own Canvas.</p>
						</div>
					</div>
					<div class="swiper-slide-bg" style="background-image: url('images/slider/swiper/1.jpg');"></div>
				</div>
			</div>
			<div class="slider-arrow-left"><i class="icon-angle-left"></i></div>
			<div class="slider-arrow-right"><i class="icon-angle-right"></i></div>
		</div>

		<a href="#" data-scrollto="#content" data-offset="100" class="one-page-arrow dark"><i class="icon-angle-down infinite animated fadeInDown"></i></a>

	</div>
</section>

If you need any further help with this, please feel free to get in touch.