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>
              
            

YouTube example

                    
                      <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

                    
                      <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

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

JavaScript behavior

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

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

              
                data-hs-video-bg-options='{
                 ...
              }' - array
              
            

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-video-bg-options='{}'.

Parameters Description Default value

type

Type of video. Valid Values: you-tube, vimeo and default 'default'

videoId

For you-tube and vimeo video ID, for default - the relative path to the video files on the server null

isLoop

Determines whether the video will be played cyclically or once true

ratio

Determines the aspect ratio of the video 1.5