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 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.helpers.HSBgVideo.init('.js-bg-video');
                });
              </script>

Basic example 

            
              <div class="position-relative height-400">
                <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>

JavaScript behavior

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

data-hs-bgv-type

 Source of the video player youtube

data-hs-bgv-id

 The ID of the video. 0qisGSwZym4

data-hs-bgv-loop

 Play the video again when it reaches the end. true