Video Inline

Video Cover - Embedded

The video cover allows you to embed a video using an iframe from service providers such as Youtube, Vimeo etc. Additionally you can use your own cover image and theme-consistent play button to maintain full visual control over the page.

<div class="video-cover border--round">
	<div class="background-image-holder">
		<img alt="image" src="img/bg.jpg" />
	</div>
	<div class="video-play-icon video-play-icon--sm"></div>
	<iframe></iframe>
</div><!--end video cover-->
					

Video Cover - Local

This video cover allows you to embed a locally hosted HTML5 video (use mp4,webm and ogg formats). Additionally you can use your own cover image and theme-consistent play button to maintain full visual control over the page.

<div class="video-cover border--round">
	<div class="background-image-holder">
		<img alt="image" src="img.jpg" />
	</div>
	<div class="video-play-icon video-play-icon--sm"></div>
	<video autoplay controls>
		<source src="video/video.webm" type="video/webm">
		<source src="video/video.mp4" type="video/mp4">
		<source src="video/video.ogv" type="video/ogg">
	</video>
</div><!--end video cover-->
					

Play Video Icon - Modal

This play button opens the linked video inside a modal. See modals page for more information on how to use modals.

Use the background classes on the .video-play-icon to change the colour of the play button.

<div class="modal-instance">
	<div class="video-play-icon modal-trigger box-shadow bg--primary"></div>
	<div class="modal-container">
		<div class="modal-content bg-dark" data-width="60%" data-height="60%">
			<iframe></iframe>
		</div><!--end of modal-content-->
	</div><!--end of modal-container-->
</div><!--end of modal instance-->
					

Play Video Button - Modal

This button opens the linked video inside a modal. See modals page for more information on how to use modals.

<div class="modal-instance">
	<a class="btn type--uppercase modal-trigger" href="#">
		<span class="btn__text">
			▶ Watch Overview
		</span>
	</a>
	<div class="modal-container">
		<div class="modal-content bg-dark" data-width="60%" data-height="60%">
			<iframe></iframe>
		</div><!--end of modal-content-->
	</div><!--end of modal-container-->
</div><!--end of modal instance-->