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