Video Player
Examples of video player components.
Video player #1
<!-- Video Section -->
<div class="container space-2">
<div class="row justify-content-sm-center">
<div class="col-lg-9 col-xl-8">
<!-- Video Block -->
<div id="youTubeVideoPlayerExample1" class="u-video-player">
<!-- Cover Image -->
<img class="img-fluid u-video-player__preview" src="../../assets/img/900x450/img2.jpg" alt="Image">
<!-- End Cover Image -->
<!-- Play Button -->
<a class="js-inline-video-player u-video-player__btn u-video-player__centered" href="javascript:;"
data-video-id="0qisGSwZym4"
data-parent="youTubeVideoPlayerExample1"
data-is-autoplay="true"
data-target="youTubeVideoIframeExample1"
data-classes="u-video-player__played">
<span class="u-video-player__icon u-video-player__icon--lg text-primary">
<span class="fas fa-play u-video-player__icon-inner"></span>
</span>
</a>
<!-- End Play Button -->
<!-- Video Iframe -->
<div class="embed-responsive embed-responsive-16by9">
<div id="youTubeVideoIframeExample1"></div>
</div>
<!-- End Video Iframe -->
</div>
<!-- End Video Block -->
</div>
</div>
</div>
<!-- End Video Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/player.js/dist/player.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.video-player.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of video player
$.HSCore.components.HSVideoPlayer.init('.js-inline-video-player');
});
</script>
SVG blocks #2
<!-- Core Values -->
<div class="position-relative">
<div class="container space-2">
<div class="row align-items-center">
<div class="col-lg-5 mb-9 mb-lg-0">
<!-- Title -->
<div class="pr-lg-4 mb-7">
<span class="btn btn-xs btn-soft-success btn-pill mb-2">Opportunity</span>
<h2 class="text-primary">Our core
<span class="font-weight-semi-bold">values</span>
</h2>
<p>At Front, we don't just accept difference—we celebrate it, we support it, and we thrive on it for the benefit of our employees, our products, and our community.</p>
</div>
<!-- End Title -->
<div class="row">
<div class="col-sm-6">
<!-- List -->
<ul class="list-unstyled mb-0">
<li class="py-2">
<div class="media">
<span class="btn btn-sm btn-icon btn-soft-danger rounded-circle mr-3">
<span class="fas fa-heart btn-icon__inner"></span>
</span>
<div class="media-body">
Empathy
</div>
</div>
</li>
<li class="py-2">
<div class="media">
<span class="btn btn-sm btn-icon btn-soft-primary rounded-circle mr-3">
<span class="fas fa-smile btn-icon__inner"></span>
</span>
<div class="media-body">
Courtesy
</div>
</div>
</li>
<li class="py-2">
<div class="media">
<span class="btn btn-sm btn-icon btn-soft-success rounded-circle mr-3">
<span class="fab fa-studiovinari btn-icon__inner"></span>
</span>
<div class="media-body">
Thriving
</div>
</div>
</li>
</ul>
<!-- End List -->
</div>
<div class="col-sm-6">
<!-- List -->
<ul class="list-unstyled mb-0">
<li class="py-2">
<div class="media">
<span class="btn btn-sm btn-icon btn-soft-danger rounded-circle mr-3">
<span class="fab fa-steam-symbol btn-icon__inner"></span>
</span>
<div class="media-body">
Craftsmanship
</div>
</div>
</li>
<li class="py-2">
<div class="media">
<span class="btn btn-sm btn-icon btn-soft-primary rounded-circle mr-3">
<span class="fas fa-table-tennis btn-icon__inner"></span>
</span>
<div class="media-body">
Playfulness
</div>
</div>
</li>
<li class="py-2">
<div class="media">
<span class="btn btn-sm btn-icon btn-soft-success rounded-circle mr-3">
<span class="fab fa-slideshare btn-icon__inner"></span>
</span>
<div class="media-body">
Solidarity
</div>
</div>
</li>
</ul>
<!-- End List -->
</div>
</div>
</div>
<div class="col-lg-7 position-relative">
<!-- Video Block -->
<div id="youTubeVideoPlayer" class="u-video-player mb-5">
<!-- Cover Image -->
<img class="img-fluid u-video-player__preview" src="../../assets/img/900x450/img5.jpg" alt="Image">
<!-- End Cover Image -->
<!-- Play Button -->
<a class="js-inline-video-player u-video-player__btn u-video-player__centered" href="javascript:;"
data-video-id="0qisGSwZym4"
data-parent="youTubeVideoPlayer"
data-is-autoplay="true"
data-target="youTubeVideoIframe"
data-classes="u-video-player__played">
<span class="u-video-player__icon u-video-player__icon--lg text-primary">
<span class="fas fa-play u-video-player__icon-inner"></span>
</span>
</a>
<!-- End Play Button -->
<!-- Video Iframe -->
<div class="embed-responsive embed-responsive-16by9">
<div id="youTubeVideoIframe"></div>
</div>
<!-- End Video Iframe -->
</div>
<!-- End Video Block -->
<!-- SVG Background Shape -->
<div id="SVGbgShape" class="svg-preloader w-100 content-centered-y z-index-n1">
<figure class="ie-soft-triangle-shape">
<img class="js-svg-injector" src="../../assets/svg/components/soft-triangle-shape.svg" alt="Image Description"
data-parent="#SVGbgShape">
</figure>
</div>
<!-- End SVG Background Shape -->
</div>
</div>
</div>
</div>
<!-- End Core Values -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<script src="../../assets/vendor/player.js/dist/player.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<script src="../../assets/js/components/hs.video-player.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
// initialization of video player
$.HSCore.components.HSVideoPlayer.init('.js-inline-video-player');
});
</script>
Video player #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>
Video player #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>
Video player #5
<!-- 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>
Video player #6
<!-- 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>