Video Player
Examples of video player components.
Video player #1
HTML:
<!-- Video Section -->
<div class="container">
<div class="row justify-content-sm-center text-center">
<div class="col-lg-9 col-xl-8">
<!-- Video Block -->
<div id="videoSection" class="u-video-player">
<!-- Cover Image -->
<img class="img-fluid u-video-player__preview" src="../assets/img/900x450/img1.jpg" alt="Image Description">
<!-- End Cover Image -->
<!-- Play Button -->
<a class="js-inline-video-player u-video-player__btn u-video-player__centered" href="javascript:;"
data-parent="videoSection"
data-target="youTubeVideo"
data-classes="u-video-player__played">
<span class="u-video-player__icon">
<span class="fa fa-play u-video-player__icon-inner"></span>
</span>
</a>
<!-- End Play Button -->
<!-- Video Iframe -->
<div class="embed-responsive embed-responsive-16by9">
<iframe id="youTubeVideo" class="embed-responsive-item" data-src="//www.youtube.com/embed/0qisGSwZym4?autoplay=1&showinfo=0&rel=0">
</iframe>
</div>
<!-- End Video Iframe -->
</div>
<!-- End Video Block -->
</div>
</div>
</div>
<!-- End Video Section -->
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/player.js/dist/player.min.js"></script>
<!-- JS Space -->
<script src="../../assets/js/helpers/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>
Video player #2
HTML:
<!-- Video Player Section -->
<a class="js-fancybox d-block text-center bg-img-hero" href="javascript:;" style="background-image: url(../assets/img/1920x800/img8.jpg);"
data-src="//vimeo.com/167434033"
data-speed="700"
data-animate-in="zoomIn"
data-animate-out="zoomOut"
data-caption="Space - Responsive Website Template">
<span class="d-inline-block u-media-player space-4">
<span class="u-media-player__icon u-media-player__icon--xl u-media-player__icon--primary">
<span class="fa fa-play u-media-player__icon-inner"></span>
</span>
</span>
</a>
<!-- End Video Player Section -->
CSS library:
<link rel="stylesheet" href="../../assets/vendor/fancybox/jquery.fancybox.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/fancybox/jquery.fancybox.min.js"></script>
<!-- JS Space -->
<script src="../../assets/js/components/hs.fancybox.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of fancybox
$.HSCore.components.HSFancyBox.init('.js-fancybox');
});
</script>
Video player #3
A complete website solution.
Space offers customers an all-inclusive website solution to help them save time, money, and operational resources. Space makes you look at things from a different perspectives.
HTML:
<!-- Features Section -->
<div class="container">
<div class="row align-items-md-center">
<div class="col-md-5 mb-9 mb-md-0">
<div class="pr-lg-4">
<!-- Title -->
<div class="mb-4">
<h2 class="h3">A complete website solution.</h2>
<p>Space offers customers an all-inclusive website solution to help them save time, money, and operational resources. Space makes you look at things from a different perspectives.</p>
</div>
<!-- End Title -->
<a href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">
Sign up for a 14-day trial
<span class="fa fa-angle-right ml-2"></span>
</a>
</div>
</div>
<div class="col-md-7">
<!-- Video Block -->
<div id="youTubeVideoPlayer" class="u-video-player">
<!-- Cover Image -->
<img class="img-fluid u-video-player__preview" src="../assets/img/900x450/img9.jpg" alt="Image Description">
<!-- End Cover Image -->
<!-- Play Button -->
<a class="js-inline-video-player u-video-player__btn u-video-player__centered" href="javascript:;"
data-parent="youTubeVideoPlayer"
data-target="youTubeVideoIframe"
data-classes="u-video-player__played">
<span class="u-video-player__icon">
<span class="fa fa-play u-video-player__icon-inner"></span>
</span>
</a>
<!-- End Play Button -->
<!-- Video Iframe -->
<div class="embed-responsive embed-responsive-16by9">
<iframe id="youTubeVideoIframe" class="embed-responsive-item" src="//www.youtube.com/embed/0qisGSwZym4?autoplay=1&showinfo=0&rel=0"></iframe>
</div>
<!-- End Video Iframe -->
</div>
<!-- End Video Block -->
</div>
</div>
</div>
<!-- End Features Section -->
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/player.js/dist/player.min.js"></script>
<!-- JS Space -->
<script src="../../assets/js/helpers/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>