Video Background

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?

Copy-paste the stylesheet <link> into your <head> to load the CSS.

              
                <link rel="stylesheet" href="./assets/vendor/hs-video-bg/dist/hs-video-bg.min.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-video-bg/dist/hs-video-bg.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 BACKGROUND
                    // =======================================================
                    $('.js-video-bg').each(function () {
                      var videoBg = new HSVideoBg($(this)).init();
                    });
                  });
                </script>

                    
                      <div class="position-relative min-h-450rem">
                        <div class="js-video-bg position-absolute w-100 h-100"
                             data-hs-video-bg-options='{
                               "type": "you-tube",
                               "videoId": "0qisGSwZym4"
                             }'>
                        </div>
                      </div>

Vimeo example

Preview
HTML

                    
                      <div class="position-relative min-h-450rem">
                        <div class="js-video-bg position-absolute w-100 h-100"
                             data-hs-video-bg-options='{
                               "type": "vimeo",
                               "videoId": "167434033"
                             }'>
                        </div>
                      </div>

HTML5 examples

Preview
HTML

                    
                      <div class="position-relative min-h-450rem">
                        <div class="js-video-bg position-absolute w-100 h-100"
                             data-hs-video-bg-options='{
                               "videoId": "../assets/video/working-in-office"
                             }'>
                        </div>
                      </div>

with Parallax effect:

                    
                      <div class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll min-h-450rem" data-options='{direction: "normal"}'>
                        <div class="dzsparallaxer--target" style="height: 120%;">
                          <div class="js-video-bg position-absolute top-0 right-0 bottom-0 left-0 w-100 h-100"
                               data-hs-video-bg-options='{
                                 "videoId": "../assets/video/working-in-office"
                               }'></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>

SCSS

SCSS-files of the component can be found here assets/scss/front/vendor/hs-video-bg/

Extend

By assigning a variable, you can call the standard methods of the plugin:

              
                <script>
                  $(document).on('ready', function () {
                    // INITIALIZATION OF VIDEO BACKGROUND
                    // =======================================================
                    $('.js-video-bg').each(function () {
                      var videoBg = new HSVideoBg($(this)).init();
                    });
                  });
                </script>

Attributes