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-->
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 pagefor more information on how to use modals.
Use the background classes on the .video-play-iconto 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 pagefor 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-->