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 →
Local Video Background
This section uses local video files hosted on your own server, required in WEBM, MP4 and OGV formats using the HTML <video> element. Place the class .videobgand .imagebgon the section as described below.
NOTE:The 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"> <video autoplay loop muted> <source src="video/video.webm" type="video/webm"> <source src="video/video.mp4" type="video/mp4"> <source src="video/video.ogv" type="video/ogv"> </video> <div class="background-image-holder"> <img alt="image" src="poser.jpg" /> </div> <div class="container pos-vertical-center"> CONTENT </div></section>
Here's a local video being used as a background
Youtube Video Background
This section uses a video hosted on Youtube. The Youtube background sections requires a div with class .youtube-backgroundwith the data attribute data-video-urlwhich is the Youtube video's ID.
Alternative, add the data-start-atattribute 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 .videobgand .imagebgon 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>