Video Background
Creates responsive video or slideshow embeds based on the width of the parent by making an intrinsic ratio that scales on any device.
How to use
Copy-paste the stylesheet <link> into your <head> to load the CSS.
<link rel="stylesheet" href="./assets/vendor/hs-video-bg/dist/hs-video-bg.min.css">
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="./assets/vendor/hs-video-bg/dist/hs-video-bg.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 BACKGROUND
// =======================================================
$('.js-video-bg').each(function () {
var videoBg = new HSVideoBg($(this)).init();
});
});
</script>
YouTube
<!-- Video Bg -->
<div class="video-bg">
<div class="js-video-bg video-bg-content"
data-hs-video-bg-options='{
"type": "you-tube",
"videoId": "d4eDWc8g0e0",
"ratio": 0.75
}'>
</div>
</div>
<!-- End Video Bg -->
Vimeo
<!-- Video Bg -->
<div class="video-bg">
<div class="js-video-bg video-bg-content"
data-hs-video-bg-options='{
"type": "vimeo",
"videoId": "412471131",
"ratio": 0.75
}'>
</div>
</div>
<!-- End Video Bg -->
HTML5
<!-- Video Bg -->
<div class="video-bg">
<div class="js-video-bg video-bg-content"
data-hs-video-bg-options='{
"videoId": "../assets/video/our-business-is-growing"
}'>
</div>
</div>
<!-- End Video Bg -->
Methods
| Parameters | Description | Default value |
|---|---|---|
|
|
Type of video. Valid Values: you-tube, vimeo and default |
'default' |
|
|
For you-tube and vimeo video ID, for default - the relative path to the video files on the server |
null |
|
|
Determines whether the video will be played cyclically or once | true |
|
|
Determines the aspect ratio of the video | 1.5 |