Background Video

Create responsive video or slideshow embeds based on the width of the parent by creating 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 Space to enable it.

              <script src="../../assets/js/helpers/"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

                $(document).on('ready', function () {
                  // initialization of video on background

Basic example

              <div class="position-relative height-400">
                <div class="js-bg-video position-absolute w-100 h-100"

JavaScript behavior


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