Video Player
Documentation and examples of the video player components.
Example
Front includes several predefined media player styles.
<a class="u-media-player" href="#">
<span class="u-media-player__icon">
<span class="fas fa-play u-media-player__icon-inner"></span>
</span>
</a>
<a class="u-media-player" href="#">
<span class="u-media-player__icon u-media-player__icon--box-shadow">
<span class="fas fa-play u-media-player__icon-inner"></span>
</span>
</a>
<a class="u-media-player" href="#">
<span class="u-media-player__icon u-media-player__icon--primary">
<span class="fas fa-play u-media-player__icon-inner"></span>
</span>
</a>
<a class="u-media-player" href="#">
<span class="u-media-player__icon u-media-player__icon--success">
<span class="fas fa-play u-media-player__icon-inner"></span>
</span>
</a>
<a class="media align-items-center u-media-player mb-3" href="#">
<span class="d-flex mr-3">
<span class="u-media-player__icon">
<span class="fas fa-play u-media-player__icon-inner"></span>
</span>
</span>
<span class="media-body">
Play video
</span>
</a>
<a class="media align-items-center u-media-player mb-3" href="#">
<span class="d-flex mr-3">
<span class="u-media-player__icon u-media-player__icon--box-shadow">
<span class="fas fa-play u-media-player__icon-inner"></span>
</span>
</span>
<span class="media-body">
Play video
</span>
</a>
<a class="media align-items-center u-media-player mb-3" href="#">
<span class="d-flex mr-3">
<span class="u-media-player__icon u-media-player__icon--primary">
<span class="fas fa-play u-media-player__icon-inner"></span>
</span>
</span>
<span class="media-body">
Play video
</span>
</a>
<a class="media align-items-center u-media-player mb-3" href="#">
<span class="d-flex mr-3">
<span class="u-media-player__icon u-media-player__icon--success">
<span class="fas fa-play u-media-player__icon-inner"></span>
</span>
</span>
<span class="media-body">
Play video
</span>
</a>
Sizes
Fancy larger or extra larger additional sizes are also available.
<a class="u-media-player" href="#">
<span class="u-media-player__icon u-media-player__icon--primary">
<span class="fas fa-play u-media-player__icon-inner"></span>
</span>
</a>
<a class="u-media-player" href="#">
<span class="u-media-player__icon u-media-player__icon--lg u-media-player__icon--primary">
<span class="fas fa-play u-media-player__icon-inner"></span>
</span>
</a>
<a class="u-media-player" href="#">
<span class="u-media-player__icon u-media-player__icon--xl u-media-player__icon--primary">
<span class="fas fa-play u-media-player__icon-inner"></span>
</span>
</a>
Additional classes
| Class | Description |
|---|---|
|
|
Vertically center aligns the .u-media-player button to the parent class. |
|
|
Vertically center aligns the .u-media-player button to the parent class and offsets -50% to the left. |
Overview
With the help of a small hs.video-player.js library, video contents are covered with an image and revealed after clicking to the play
button.
Rules are directly applied to <iframe>, <embed>, <video>, and <object> elements.
How to use?
Wrap an ID block in a parent element with .u-video-player and an aspect ratio which triggers the player on click.
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="../../assets/vendor/player.js/dist/player.min.js"></script>
Copy-paste the following <script> near the end of your pages under JS Front to enable it.
<script src="../../assets/js/components/hs.video-player.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
$(document).on('ready', function () {
// initialization of video player
$.HSCore.components.HSVideoPlayer.init('.js-inline-video-player');
});
</script>
This plugin works with Bootstrap's embed utility.
Basic example
<!-- Video Section -->
<div class="container space-2">
<!-- 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="t9R7xx0joOU"
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>
<!-- 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>
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-target="".
| Attribute | Description |
|---|---|
|
|
ID of a video player. For example:
|
|
|
If data-autoplay="" is set to true, the video content will play on click. |
|
|
Target attribute that fires up the video content based on the parent ID. |
|
|
Specify a class for managing the video playback style. |