Video Background - Documentation | Mid-Continent Funding, Inc.

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> near the end of your pages under JS Implementing Plugins to enable it.

<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>
  (function() {
    // INITIALIZATION OF VIDEO BACKGROUND
    // =======================================================
    $('.js-video-bg').each(function () {
      var videoBg = new HSVideoBg($(this)).init();
    });
  })()
</script>

<!-- Video Bg -->
<div class="video-bg">
  <div class="js-video-bg video-bg-content"
       data-hs-video-bg-options='{
         "type": "you-tube",
         "videoId": "d4eDWc8g0e0",
         "ratio": 0.75
       }'>
  </div>
</div>
<!-- End Video Bg -->

Vimeo

Preview
HTML

<!-- Video Bg -->
<div class="video-bg">
  <div class="js-video-bg video-bg-content"
       data-hs-video-bg-options='{
         "type": "vimeo",
         "videoId": "412471131",
         "ratio": 0.75
       }'>
  </div>
</div>
<!-- End Video Bg -->

HTML5

Preview
HTML

<!-- Video Bg -->
<div class="video-bg">
  <div class="js-video-bg video-bg-content"
       data-hs-video-bg-options='{
         "videoId": "../assets/video/our-business-is-growing"
       }'>
  </div>
</div>
<!-- End Video Bg -->

Methods

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`