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="video" class="u-video-player">
<!-- Cover Image -->
<img class="img-fluid u-video-player__preview" src="../assets/img/900x450/img1.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-target="#video"
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/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>