Stack | Multipurpose HTML Template with Variant Page Builder
Sign up with Email

Already have an account? Login


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 .videobg and .imagebg on 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>
					
image

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-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>
					
image

Here's a Youtube video being used as a background