Video Player
Documentation and examples of the video player components.
Examples
Front includes several predefined media player styles.
<a class="u-media-player" href="#">
<span class="u-media-player__icon">
<span class="fa 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="fa 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="fa 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="fa 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="fa 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="fa 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="fa 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="fa 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="fa 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="fa 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="fa fa-play u-media-player__icon-inner"></span>
</span>
</a>
Important
Front does not include all classes, but includes only used classes to reduce the size of CSS files. However, you can add more sizes by adding entries to the Sass map variable via: assets/include/scss/base/media-player/.
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 any embed like an <iframe> in a parent element with .u-video-player, an ID and also an aspect ratio which triggers the player on click.
Also, add the same ID to the <iframe> that you give in the init function of the JS.
Copy-paste the following <script> near the end of your pages under JS Front to enable it.
<script src="assets/js/helpers/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 slick carousels
$.HSCore.components.HSVideoPlayer.init('.js-classes-toggle', {
oneClick: function() {
$('#youTubeVideo').attr('src', $('#youTubeVideo').data('src'));
}
});
});
</script>
This plugin works with Bootstrap's embed utility.
Basic example
<div id="video" class="u-video-player">
<img class="img-fluid u-video-player__preview" src="../../assets/img/900x450/img2.jpg" alt="Image">
<a class="js-classes-toggle 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 u-video-player__icon--lg text-primary">
<span class="fa fa-play u-video-player__icon-inner"></span>
</span>
</a>
<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>
</div>
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 |
|---|---|
|
|
Target attribute that fires up the video content based on the parent ID. |
|
|
Specify a class for managing the video playback style. |