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>

YouTube 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>

Vimeo example 

                  
                    <div class="position-relative min-height-450">
                      <div class="js-bg-video position-absolute w-100 h-100"
                           data-hs-bgv-type="vimeo"
                           data-hs-bgv-id="167434033"
                           data-hs-bgv-loop="true">
                      </div>
                    </div>

HTML5 examples 

                  
                    <div class="position-relative min-height-450">
                      <div class="js-bg-video position-absolute w-100 h-100"
                           data-hs-bgv-path="../../assets/media/html5-video/working-in-office/working-in-office"
                           data-hs-bgv-loop="1">
                      </div>
                    </div>

with Parallax effect:

                  
                    <div class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll min-height-450" data-options='{direction: "normal"}'>
                      <div class="dzsparallaxer--target" style="height: 130%; background-color: #000; background-image: url(../../assets/media/html5-video/working-in-office/working-in-office.jpg);"
                           data-forcewidth_ratio="1.77">
                        <div class="js-bg-video position-absolute top-0 right-0 bottom-0 left-0 w-100 h-100"
                             data-hs-bgv-path="../../assets/media/html5-video/working-in-office/working-in-office"
                             data-hs-bgv-loop="1"></div>
                      </div>
                    </div>
                  
                
                  
                    <!-- JS Implementing Plugins -->
                    <link rel="stylesheet" href="../../assets/vendor/dzsparallaxer/dzsparallaxer.css">
                  
                
                  
                    <!-- JS Implementing Plugins -->
                    <script src="../../assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>

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