Background Video
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?
Add a .js-bg-video class in a parent element with data-hs-bgv-type and data-hs-bgv-id data attributes.
Each element must have at least a data-hs-bgv-type and data-hs-bgv-id attribute in order for the embed to be created automatically.
Copy-paste the stylesheet <link> into your <head> to load the CSS.
<link rel="stylesheet" href="../../assets/vendor/hs-bg-video/hs-bg-video.css">
Copy-paste the following <script>s near the end of your pages under JS Implementing Plugins to enable them.
<script src="../../assets/vendor/hs-bg-video/hs-bg-video.js"></script>
<script src="../../assets/vendor/hs-bg-video/vendor/player.min.js"></script>
Copy-paste the following <script> near the end of your pages under JS Front to enable it.
<script src="../../assets/js/components/hs.bg-video.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 on background
$.HSCore.components.HSBgVideo.init('.js-bg-video');
});
</script>
Basic example
<div class="position-relative min-height-450">
<div class="js-bg-video position-absolute w-100 h-100"
data-hs-bgv-type="youtube"
data-hs-bgv-id="0qisGSwZym4"
data-hs-bgv-loop="true">
</div>
</div>
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-hs-bgv-type="".
| Attribute | Description | Example value |
|---|---|---|
|
|
Source of the video player. | youtube |
|
|
The ID of the video. | 0qisGSwZym4 |
|
|
Play the video again when it reaches the end. | true |