Video Player - Inline
Examples of video player components.
Inline #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>
Inline #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>