Telling our story
Telling the story in our customers' preferred channel, on the fly.
HTML:
<!-- Hero Section -->
<div class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll" data-options='{direction: "normal"}'>
<!-- Apply your Parallax background image here -->
<div class="divimage dzsparallaxer--target gradient-overlay-half-dark-v1" style="height: 120%; background-image: url(../../assets/img/1920x1080/img15.jpg);"></div>
<!-- Content -->
<div class="container position-relative z-index-2 space-2 space-3--lg">
<div class="w-md-80 w-lg-50 text-center mx-md-auto mb-9">
<h2 class="display-4 text-white">Telling our story</h2>
<p class="lead text-white">Telling the story in our customers' preferred channel, on the fly.</p>
</div>
</div>
<!-- End Content -->
</div>
<!-- End Hero Section -->
<!-- Video Section -->
<div class="container position-relative z-index-2 mt-n9">
<div class="w-lg-75 bg-white shadow-sm rounded p-2 mx-lg-auto">
<!-- Video Block -->
<div id="youTubeVideoPlayer" 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-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"></iframe>
</div>
<!-- End Video Iframe -->
</div>
<!-- End Video Block -->
</div>
</div>
<!-- End Video Section -->
CSS library:
<link rel="stylesheet" href="../../assets/vendor/dzsparallaxer/dzsparallaxer.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>
<script src="../../assets/vendor/player.js/dist/player.min.js"></script>
<!-- JS Space -->
<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>