Video Backgrounds

These modular elements can be readily used and customized across pages and in different blocks.

Explore all of Stack's modular elements
at the Element Index Page ?

Youtube Video Background

This section uses a video hosted on Youtube. The Youtube background sections requires a div with class .youtube-background with the data attribute data-video-url which is the Youtube video's ID.

Alternative, add the data-start-at attribute with a numerical value to start the video playing from a particular point ie. a value of 10 would start the video 10 seconds in.

Place the class .videobg and .imagebg on the section as described below.

NOTE: The Youtube video background element does not display on mobile devices, for these devices, a fallback poster image is used.

<section class="imagebg videobg height-60 text-center" data-overlay="4">
  <div class="youtube-background" data-video-url="VID ID HERE" data-start-at="10"></div>
  <div class="background-image-holder">
    <img alt="image" src="poster.jpg" />
  <div class="container pos-vertical-center">

Here's a Youtube video being used as a background