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

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

ID of a video player. For example: Image Description

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