Video banners
Video and slider
<section class="video-banner initSlider">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="video-banner__content">
<picture class="slideshow__image">
<source media="(max-width: 767px)" srcset="images/content/video-banner-1-mobile.jpg" />
<source media="(max-width: 1024px)" srcset="images/content/video-banner-1-tablet.jpg" />
<img src="images/content/video-banner-1.jpg" alt="Slideshow slide 1" />
</picture>
<h2 class="h3">Turpis tincidunt tortor sapien id. Lacus neque laoreet mattis.</h2>
<a href="#" class="video-play"><span>4:46</span></a>
<p>Pharetra, at commodo, vel ipsum nullam sit. Donec sodales semper dolor placerat sociis sed. Dignissim curabitur ornare vel egestas. Lectus.</p>
<a href="#" class="button button--inverse"><span>More</span></a>
</div>
</div>
<div class="swiper-slide">
<div class="video-banner__content">
<img src="images/content/video-banner-1.jpg" />
<h2 class="h3">Turpis tincidunt tortor sapien id. Lacus neque laoreet mattis 2.</h2>
<a href="#" class="video-play"><span>4:46</span></a>
<p>Pharetra, at commodo, vel ipsum nullam sit. Donec sodales semper dolor placerat sociis sed. Dignissim curabitur ornare vel egestas. Lectus.</p>
<a href="#" class="button button--inverse"><span>More</span></a>
</div>
</div>
<div class="swiper-slide">
<div class="video-banner__content">
<img src="images/content/video-banner-1.jpg" />
<h2 class="h3">Turpis tincidunt tortor sapien id. Lacus neque laoreet mattis 3.</h2>
<a href="#" class="video-play"><span>4:46</span></a>
<p>Pharetra, at commodo, vel ipsum nullam sit. Donec sodales semper dolor placerat sociis sed. Dignissim curabitur ornare vel egestas. Lectus.</p>
<a href="#" class="button button--inverse"><span>More</span></a>
</div>
</div>
...
</div>
<a href="javascript:void(0)" class="swiper-button-prev"></a>
<a href="javascript:void(0)" class="swiper-button-next"></a>
</div>
</section>Video without slider
<section class="video-banner">
<div class="video-banner__content">
<picture class="slideshow__image">
<source media="(max-width: 767px)" srcset="images/content/video-banner-1-mobile.jpg" />
<source media="(max-width: 1024px)" srcset="images/content/video-banner-1-tablet.jpg" />
<img src="images/content/video-banner-1.jpg" alt="Slideshow slide 1" />
</picture>
<h2 class="h3">Turpis tincidunt tortor sapien id. Lacus neque laoreet mattis.</h2>
<a href="#" class="video-play"><span>4:46</span></a>
<p>Pharetra, at commodo, vel ipsum nullam sit. Donec sodales semper dolor placerat sociis sed. Dignissim curabitur ornare vel egestas. Lectus.</p>
<a href="#" class="button button--inverse"><span>More</span></a>
</div>
</section>Video minimalistic
Add new option attribute class .video-banner--minimalistic to parent / root container.
<section class="video-banner video-banner--minimalistic">
<div class="video-banner__content">
<picture class="slideshow__image">
<source media="(max-width: 767px)" srcset="images/content/video-banner-1-mobile.jpg" />
<source media="(max-width: 1024px)" srcset="images/content/video-banner-1-tablet.jpg" />
<img src="images/content/video-banner-1.jpg" alt="Slideshow slide 1" />
</picture>
<a href="#" class="video-play"><span>4:46</span></a>
</div>
</section>