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>

                      
                        <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

Result
HTML

                      
                        <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

Result
HTML

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

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="".