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="/sites/stack/files/video/video.webm" type="video/webm">
            		<source src="/sites/stack/files/video/video.mp4" type="video/mp4">
            		<source src="/sites/stack/files/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-->