Skip to main content

Background Video

Create responsive video or slideshow embeds based on the width of the parent by creating 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

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

Copy-paste the following <script> near the end of your pages under JS Space to enable it.

<script src="../../assets/js/helpers/hs.bg-video.js"></script>
Copy

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.helpers.HSBgVideo.init('.js-bg-video');
  });
</script>
Copy

Basic example 

<div class="position-relative height-400">
  <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>
Copy

JavaScript behavior

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

Attribute Description Example value

data-hs-bgv-type

 Source of the video player youtube

data-hs-bgv-id

 The ID of the video. 0qisGSwZym4

data-hs-bgv-loop

 Play the video again when it reaches the end. true