Video Player

Documentation and examples of the video player components.

Media player

Example

Front includes several predefined media player styles.

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

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

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-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-parent="youTubeVideoPlayerExample1"
                           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">
                          <iframe id="youTubeVideoIframeExample1" class="embed-responsive-item" src="//www.youtube.com/embed/0qisGSwZym4"></iframe>
                        </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>
                  
                

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

Specify a class for managing the video playback style.