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