Video Player

Documentation and examples of the video player components.

How to use?

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

              
                <script src="../../assets/vendor/hs-video-player/dist/hs-video-player.min.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
                    $('.js-inline-video-player').each(function () {
                      var videoPlayer = new HSVideoPlayer($(this)).init();
                    });
                  });
                </script>
              
            

YouTube

                    
                      <!-- Video Block -->
                      <div id="youTubeVideoPlayerExample1" class="video-player bg-dark">
                        <!-- Cover Image -->
                        <img class="img-fluid video-player-preview" src="..." alt="Image">

                        <!-- Play Button -->
                        <a class="js-inline-video-player video-player-btn video-player-centered" href="javascript:;"
                           data-hs-video-player-options='{
                             "videoId": "t9R7xx0joOU",
                             "parentSelector": "#youTubeVideoPlayerExample1",
                             "targetSelector": "#youTubeVideoIframeExample1",
                             "isAutoplay": true,
                             "classMap": {
                               "toggle": "video-player-played"
                             }
                           }'>
                          <span class="video-player-icon">
                            <i class="fas fa-play"></i>
                          </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 -->
                    
                  

Vimeo

                    
                      <!-- Video Block -->
                      <div id="vimeoVideoPlayerExample1" class="video-player bg-dark">
                        <!-- Cover Image -->
                        <img class="img-fluid video-player-preview" src="..." alt="Image">

                        <!-- Play Button -->
                        <a class="js-inline-video-player video-player-btn video-player-centered" href="javascript:;"
                           data-hs-video-player-options='{
                             "videoType": "vimeo",
                             "videoId": "167434033",
                             "parentSelector": "#vimeoVideoPlayerExample1",
                             "targetSelector": "#vimeoVideoIframeExample1",
                             "isAutoplay": true,
                             "isMuted": false,
                             "classMap": {
                               "toggle": "video-player-played"
                             }
                           }'>
                          <span class="video-player-icon">
                            <i class="fas fa-play"></i>
                          </span>
                        </a>
                        <!-- End Play Button -->

                        <!-- Video Iframe -->
                        <div class="embed-responsive embed-responsive-16by9">
                          <div id="vimeoVideoIframeExample1"></div>
                        </div>
                        <!-- End Video Iframe -->
                      </div>
                      <!-- End Video Block -->
                    
                  

HTML5 video

                    
                      <!-- Video Block -->
                      <div id="html5VideoPlayerExample1" class="video-player bg-dark">
                        <!-- Cover Image -->
                        <img class="img-fluid video-player-preview" src="..." alt="Image">

                        <!-- Play Button -->
                        <a class="js-inline-video-player video-player-btn video-player-centered" href="javascript:;"
                           data-hs-video-player-options='{
                             "videoType": "html5",
                             "videoId": "../../assets/video/working-in-office",
                             "parentSelector": "#html5VideoPlayerExample1",
                             "targetSelector": "#html5VideoIframeExample1",
                             "isAutoplay": true,
                             "isMuted": true,
                             "classMap": {
                               "toggle": "video-player-played"
                             }
                           }'>
                          <span class="video-player-icon">
                            <i class="fas fa-play"></i>
                          </span>
                        </a>
                        <!-- End Play Button -->

                        <!-- Video Iframe -->
                        <div class="embed-responsive embed-responsive-16by9">
                          <div id="html5VideoIframeExample1"></div>
                        </div>
                        <!-- End Video Iframe -->
                      </div>
                      <!-- End Video Block -->
                    
                  

JavaScript behavior

Extend

By assigning a variable, you can call the standard methods of the plugin:

              
                <script>
                  $(document).on('ready', function () {
                    // initialization of video player
                    $('.js-inline-video-player').each(function () {
                      var videoPlayer = new HSVideoPlayer($(this)).init();
                    });
                  });
                </script>
              
            

Attributes

By assigning a variable, you can call the standard methods of the plugin:

              
                data-hs-video-player-options='{
                 ...
              }' - array
              
            

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-video-player-options='{}'.

Parameters Description Default value

parentSelector

Parent element containing the invoker initializing the plugin null

targetSelector

Selector into which markup will be generated for the corresponding video type null

classMap.toggle

Toggle class for element to be initialized classMap: { toggle: 'video-player__played' }

videoType

Video type you-tube, vimeo and html5 'you-tube'

videoId

Video ID. For example, for YouTube https://www.youtube.com/watch?v=def123 - def123 is the value for this parameter. For Vimeo https://vimeo.com/56282283 - 56282283 is the value for this parameter. null

isAutoplay

Determines whether the video will play automatically false

isMuted

Determines whether the video will play muted or not false