Video Player - Popup
Examples of video player components.
Popup #1
<!-- Our Story Section -->
<div id="ourStorySection" class="svg-preloader container space-top-2">
<div class="w-lg-75 position-relative p-lg-9 mx-lg-auto">
<!-- Video Block -->
<div class="bg-white shadow rounded p-2">
<div class="height-400 bg-img-hero-center" style="background-image: url(../../assets/img/900x450/img11.jpg);">
<a class="js-fancybox u-media-player u-media-player--centered" href="javascript:;"
data-src="//vimeo.com/167434033"
data-speed="700"
data-animate-in="zoomIn"
data-animate-out="zoomOut"
data-caption="Front - Responsive Website Template">
<span class="u-media-player__icon u-media-player__icon--lg">
<span class="fas fa-play u-media-player__icon-inner mr-1"></span>
</span>
</a>
</div>
</div>
<!-- End Video Block -->
<!-- SVG Component -->
<div class="content-centered-y w-75 z-index-n1">
<figure class="ie-abstract-shapes-7">
<img class="js-svg-injector" src="../../assets/svg/components/abstract-shapes-7.svg" alt="Image Description"
data-parent="#ourStorySection">
</figure>
</div>
<!-- End SVG Component -->
</div>
</div>
<!-- Our Story Section -->
<link rel="stylesheet" href="../../assets/vendor/fancybox/jquery.fancybox.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/fancybox/jquery.fancybox.min.js"></script>
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.fancybox.js"></script>
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
$(document).on('ready', function () {
// initialization of popups
$.HSCore.components.HSFancyBox.init('.js-fancybox');
});
</script>
Popup #2
<!-- Services Section -->
<div class="container">
<div class="row justify-content-md-between align-items-center">
<div class="col-md-6 col-lg-5 mb-7 mb-md-0">
<ul class="list-unstyled u-indicator-vertical-dashed pr-md-4">
<!-- Info -->
<li class="media u-indicator-vertical-dashed-item">
<span class="btn btn-xs btn-icon btn-primary rounded-circle mr-3">
<span class="fas fa-check btn-icon__inner"></span>
</span>
<div class="media-body mt-n1">
<h3 class="h5 text-primary">Responsive design</h3>
<p>Responsive design has grown from a preference to a necessity.</p>
</div>
</li>
<!-- End Info -->
<!-- Info -->
<li class="media u-indicator-vertical-dashed-item">
<span class="btn btn-xs btn-icon btn-primary rounded-circle mr-3">
<span class="fas fa-check btn-icon__inner"></span>
</span>
<div class="media-body mt-n1">
<h3 class="h5 text-primary">Hosting</h3>
<p>We know that business never stops, and neither should your website.</p>
</div>
</li>
<!-- End Info -->
<!-- Info -->
<li class="media u-indicator-vertical-dashed-item">
<span class="btn btn-xs btn-icon btn-primary rounded-circle mr-3">
<span class="fas fa-check btn-icon__inner"></span>
</span>
<div class="media-body mt-n1">
<h3 class="h5 text-primary">Search engine optimization</h3>
<p>Improve your website's ranking in search results with our comprehensive SEO packages and services.</p>
</div>
</li>
<!-- End Info -->
</ul>
</div>
<div id="SVGellipseMockup" class="col-md-6 svg-preloader">
<!-- Fancybox -->
<a class="js-fancybox u-media-player u-media-player--centered" href="javascript:;"
data-src="//vimeo.com/167434033"
data-speed="700"
data-animate-in="zoomIn"
data-animate-out="zoomOut"
data-caption="Front - Responsive Website Template">
<span class="u-media-player__icon u-media-player__icon--xl text-primary">
<span class="fas fa-play u-media-player__icon-inner"></span>
</span>
</a>
<!-- End Fancybox -->
<!-- SVG Mockup -->
<figure class="ie-ellipse-mockup">
<img class="js-svg-injector" src="../../assets/svg/illustrations/ellipse-mockup.svg" alt="Image Description"
data-img-paths='[
{"targetId": "#SVGellipseMockupImg1", "newPath": "../../assets/img/615x750/img3.jpg"}
]'
data-parent="#SVGellipseMockup">
</figure>
<!-- End SVG Mockup -->
</div>
</div>
</div>
<!-- End Services Section -->
<link rel="stylesheet" href="../../assets/vendor/fancybox/jquery.fancybox.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/fancybox/jquery.fancybox.min.js"></script>
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.fancybox.js"></script>
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
$(document).on('ready', function () {
// initialization of popups
$.HSCore.components.HSFancyBox.init('.js-fancybox');
});
</script>
Popup #3
<!-- Video Content Section -->
<div id="SVGwave1BottomSMShape" class="svg-preloader position-relative">
<div class="bg-img-hero text-center space-4" style="background-image: url(../../assets/img/1920x800/img1.jpg);">
<!-- Fancybox -->
<a class="js-fancybox d-inline-block u-media-player mb-4" href="javascript:;"
data-src="//vimeo.com/167434033"
data-speed="700"
data-animate-in="zoomIn"
data-animate-out="zoomOut"
data-caption="Front - Responsive Website Template">
<span class="u-media-player__icon u-media-player__icon--lg">
<span class="fas fa-play u-media-player__icon-inner"></span>
</span>
</a>
<!-- End Fancybox -->
<br>
<h4 class="d-inline-block text-white mb-0">Watch Front Video</h4>
</div>
<!-- SVG Background -->
<figure class="position-absolute right-0 bottom-0 left-0">
<img class="js-svg-injector" src="../../assets/svg/components/wave-1-bottom-sm.svg" alt="Image Description"
data-parent="#SVGwave1BottomSMShape">
</figure>
<!-- End SVG Background Section -->
</div>
<!-- End Video Content -->
<link rel="stylesheet" href="../../assets/vendor/fancybox/jquery.fancybox.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/fancybox/jquery.fancybox.min.js"></script>
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.fancybox.js"></script>
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
$(document).on('ready', function () {
// initialization of popups
$.HSCore.components.HSFancyBox.init('.js-fancybox');
});
</script>
Popup #4
<!-- Video Content Section -->
<div id="SVGwave2Shape" class="svg-preloader position-relative">
<!-- Video Content -->
<div class="bg-img-hero text-center space-4" style="background-image: url(../../assets/img/1920x800/img4.jpg);">
<!-- Fancybox -->
<a class="js-fancybox u-media-player mb-4" href="javascript:;"
data-src="//vimeo.com/167434033"
data-speed="700"
data-animate-in="zoomIn"
data-animate-out="zoomOut"
data-caption="Front - Responsive Website Template">
<span class="u-media-player__icon u-media-player__icon--lg">
<span class="fas fa-play u-media-player__icon-inner"></span>
</span>
</a>
<!-- End Fancybox -->
<br>
<h4 class="d-inline-block text-white mb-0">Watch Front Video</h4>
</div>
<!-- End Video Content Section -->
<!-- SVG Top Shape -->
<figure class="position-absolute top-0 right-0 left-0">
<img class="js-svg-injector" src="../../assets/svg/components/wave-2-top.svg" alt="Image Description"
data-parent="#SVGwave2Shape">
</figure>
<!-- End SVG Top Shape -->
<!-- SVG Bottom Shape -->
<figure class="position-absolute right-0 bottom-0 left-0">
<img class="js-svg-injector" src="../../assets/svg/components/wave-2-bottom.svg" alt="Image Description"
data-parent="#SVGwave2Shape">
</figure>
<!-- End SVG Bottom Shape -->
</div>
<!-- Video Content Section -->
<link rel="stylesheet" href="../../assets/vendor/fancybox/jquery.fancybox.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/fancybox/jquery.fancybox.min.js"></script>
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.fancybox.js"></script>
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
$(document).on('ready', function () {
// initialization of popups
$.HSCore.components.HSFancyBox.init('.js-fancybox');
});
</script>