Video Backgrounds

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>
					

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>