Video Player

Documentation and examples of the video player components.

Example

Front includes several predefined media player styles.

Result
HTML

<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>

Result
HTML

Play video Play video Play video Play video

<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.

Result
HTML

<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
`.u-media-player--centered`	Vertically center aligns the `.u-media-player` button to the parent class.
`.u-media-player--left-minus-50x-top-50x`	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
`data-video-id`	ID of a video player. For example:
`data-is-autoplay`	If `data-autoplay=""` is set to `true`, the video content will play on click.
`data-target`	Target attribute that fires up the video content based on the parent ID.
`data-classes`	Specify a class for managing the video playback style.