Video Background Hero

Hero section variation with a background video.

Dependencies

• Modal Window
• Modal Video

How to

The Video Background Hero component is used to display a hero section with a looping video background. Optionally, you can include a call-to-action button that triggers a modal window containing the full video (check the --modal variation in the demo).

Video background #

If you want to play the background video only when it enters the viewport, and pause when it leaves it, you can include the following JS snippet in your project:

(function() {
  var VideoAutoplay = function(element) {
    this.element = element;
    this.intersectionObserverSupported = ('IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in window.IntersectionObserverEntry.prototype);
    initVideoAutoplay(this);
  };

  function initVideoAutoplay(video) {
    // use the Intersection Observer API to detect when video enters/leaves the viewport
    video.element.autoplay = video.intersectionObserverSupported ? false : true;
    if(!video.intersectionObserverSupported) return;
    var observer = new IntersectionObserver(videoAutoplayCallback.bind(video));
		observer.observe(video.element);
  };

  function videoAutoplayCallback(entries, observer) {
    entries[0].isIntersecting ? this.element.play() : this.element.pause();
  };

  window.VideoAutoplay = VideoAutoplay;

  // init the VideoAutoplay object
  var videoAutoplay = document.getElementsByClassName('js-video-autoplay');
  if( videoAutoplay.length > 0) {
		for(var i = 0; i < videoAutoplay.length; i++) {
      new VideoAutoplay(videoAutoplay[i]);
		}
	}
}());

Make sure to add the .js-video-autoplay class to all the video elements you want to target.

---

🎥 Demo video by invisiblepower on Pexels.

Categories

• Content and Layout > Hero

Bug report & feedback

Component Github page ↗