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

Already have an account? Login


Video Inline

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 →

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

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

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

Looking for styled video sections?

View Video Sections

or try the live builder ↗