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-mega-menu/dist/hs-mega-menu.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-mega-menu/dist/hs-mega-menu.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: 130%; background-color: #000; background-image: url(../../assets/video/working-in-office.jpg);">
                              <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