Video Backgrounds

Create Eye-Popping Sections by adding an HTML5 Video Background to it. You can use .mp4, .webm or .ogv Videos.

Code Example

<div class="section dark" style="height: 550px;">

	<div class="container clearfix">

		...

	</div>

	<div class="video-wrap">
		<video poster="images/videos/deskwork.jpg" preload="auto" loop autoplay muted>
			<source src='images/videos/deskwork.mp4' type='video/mp4' />
			<source src='images/videos/deskwork.webm' type='video/webm' />
		</video>
		<div class="video-overlay"></div>
	</div>

</div>

AutoPlaying HTML5 Videos on iOS 10 Devices and above

It is now possible to AutoPlay HTML5 Videos Inline on iOS 10 Devices. Please consider using the Steps below to enable this:

  1. Add the playsinline Attribute to the <video> Tag. Example: 
    <video id="slide-video" poster="images/videos/explore.jpg" preload="auto" loop autoplay muted playsinline>
	...
</video>
  2. Then add the .no-placeholder Class to the .video-wrap Container that encloses the <video> Tag to disable the Placeholder Image from being displayed on iOS Devices. Example: 
    <div class="video-wrap no-placeholder">
	<video id="slide-video" poster="images/videos/explore.jpg" preload="auto" loop autoplay muted playsinline>
		...
	</video>
	<div class="video-overlay" style="background-color: rgba(0,0,0,0.55);"></div>
</div>

Last Modified: December 15, 2019

Need Help?