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>
<div class="container pos-vertical-center">
CONTENT
</div>
</section>
