Skip to main content

Video Player

Documentation and examples of the video player components.

Media player

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>
Copy
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="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>
Copy

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

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

.u-media-player__centered

 Vertically center aligns the .u-media-player button to the parent class.

Video player

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

Copy-paste the following <script> near the end of your pages under JS Space to enable it.

<script src="../../assets/js/components/hs.video-player.js"></script>
Copy

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

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

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

JavaScript behavior

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

 Target attribute that fires up the video content based on the parent ID.

data-parent

 Specify a parent for managing the video playback style.

data-video-type

 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.