Video Player
Documentation and examples of the video player components.
Examples
Space 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="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>
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--xl u-media-player__icon--primary">
<span class="fa fa-play u-media-player__icon-inner"></span>
</span>
</a>
Important
Space 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. |
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 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 Space 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 video player
$.HSCore.components.HSVideoPlayer.init('.js-inline-video-player');
});
</script>
This plugin works with Bootstrap's embed utility.
YouTube example
<!-- Video Block -->
<div id="youTubeVideoPlayer" class="u-video-player">
<!-- Cover Image -->
<img class="img-fluid u-video-player__preview" src="../assets/img/img41-lg.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 -->
Vimeo example
<!-- Video Block -->
<div id="vimeoVideoPlayer" class="u-video-player">
<!-- Cover Image -->
<img class="img-fluid u-video-player__preview" src="../assets/img/img42-lg.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-type="vimeo"
data-parent="vimeoVideoPlayer"
data-target="vimeoVideoIframe"
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="vimeoVideoIframe" class="embed-responsive-item" src="//player.vimeo.com/video/97243285"></iframe>
</div>
<!-- End Video Iframe -->
</div>
<!-- End Video Block -->
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 parent for managing the video playback style. |
|
The background video type, like: YouTube or Vimeo. Set it to vimeo when a Vimeo video is included. No need to include YouTube video, as it set by default. |