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

Preview
HTML

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

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

Preview
HTML

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

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