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>
(function() {
// INITIALIZATION OF VIDEO PLAYER
// =======================================================
new HSVideoPlayer('.js-inline-video-player')
})()
</script>
YouTube
<!-- Video Block -->
<div id="youTubeVideoPlayer" class="video-player video-player-inline-btn">
<img class="img-fluid video-player-preview" src="../assets/img/1920x800/img6.jpg" alt="Image">
<!-- Play Button -->
<a class="js-inline-video-player video-player-btn video-player-centered" href="javascript:;"
data-hs-video-player-options='{
"videoId": "d4eDWc8g0e0",
"parentSelector": "#youTubeVideoPlayer",
"targetSelector": "#youTubeVideoIframe",
"isAutoplay": true
}'>
<span class="video-player-icon shadow-sm">
<i class="bi-play-fill"></i>
</span>
</a>
<!-- End Play Button -->
<!-- Video Iframe -->
<div class="ratio ratio-16x9">
<div id="youTubeVideoIframe"></div>
</div>
<!-- End Video Iframe -->
</div>
<!-- End Video Block -->
Vimeo
<!-- Video Block -->
<div id="vimeoVideoPlayer" class="video-player video-player-inline-btn">
<img class="img-fluid video-player-preview" src="../assets/img/1920x800/img6.jpg" 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": "412471131",
"parentSelector": "#vimeoVideoPlayer",
"targetSelector": "#vimeoVideoIframe",
"isAutoplay": true
}'>
<span class="video-player-icon shadow-sm">
<i class="bi-play-fill"></i>
</span>
</a>
<!-- End Play Button -->
<!-- Video Iframe -->
<div class="ratio ratio-16x9">
<div id="vimeoVideoIframe"></div>
</div>
<!-- End Video Iframe -->
</div>
<!-- End Video Block -->
HTML5
<!-- Video Block -->
<div id="html5VideoPlayer" class="video-player video-player-inline-btn">
<img class="img-fluid video-player-preview" src="../assets/video/working-in-office.jpg" 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",
"videoId": "412471131",
"parentSelector": "#html5VideoPlayer",
"targetSelector": "#html5VideoIframe",
"isAutoplay": true
}'>
<span class="video-player-icon shadow-sm">
<i class="bi-play-fill"></i>
</span>
</a>
<!-- End Play Button -->
<!-- Video Iframe -->
<div class="ratio ratio-16x9">
<div id="html5VideoIframe"></div>
</div>
<!-- End Video Iframe -->
</div>
<!-- End Video Block -->
Methods
Parameters | Description | Default value |
---|---|---|
|
Parent element containing the invoker initializing the plugin | null |
|
Selector into which markup will be generated for the corresponding video type | null |
|
Toggle class for element to be initialized |
classMap: {
toggle: 'video-player__played'
}
|
|
Video type you-tube , vimeo and html5 |
'you-tube' |
|
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 |
|
Determines whether the video will play automatically | false |
|
Determines whether the video will play muted or not | false |