Get 10% Off On Your Travel - Background video | Travel Kit - Documentation | JoomShaper

Travel Kit

Updated Last: 04 May 2016

Get 10% Off On Your Travel - Background video

To show background video with labels on it we used simple Custom HTML module with custom HTML player code, published on "call-to-action" module position. Here is example html code, which can be customized for your projects needs. Of course use your own video clip.

<div data-vide-bg="" data-vide-ogv="http://demo.joomshaper.com/2014/travelkit/travelkit.ogv" data-vide-mp4="http://demo.joomshaper.com/2014/travelkit/travelkit.mp4" 
class="call-to-action-main-wrapper" style="position: relative;">
<div style="position: absolute; z-index: -1; top: 0px; left: 0px; bottom: 0px; right: 0px; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%;">
<video style="visibility: visible; margin: auto; position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1437px; height: auto;" autoplay="" loop="">
<source type="video/mp4" src="http://demo.joomshaper.com/2014/travelkit/travelkit.mp4"></source><source type="video/ogg" src="http://demo.joomshaper.com/2014/travelkit/travelkit.ogv">
</source></video></div>
<div class="col-to-action-wrapper">
<div class="background-video">&nbsp;</div>
<div class="col-to-action-content text-center">
<h1>Get 10% Off On Your Next Travel</h1>
<p>Travel between 22nd August to 23 November and get exciting offers along with a sure<br> 10% cash discount.</p>
<a class="btn btn-primary">Buy Now</a></div>
</div>
</div>

 

Note: MP4 is not supported with Firefox, that's why we added ogg video support.