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>

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>

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
`.u-media-player__centered`	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
`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.