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