Videos
Ascension allows you to embed videos from any online platform (YouTube, Vimeo, etc) as well as create what I call video placeholders where a play button is overlayed on a regular image and clicking that play button opens an embeddable video in a lightbox.
Embedding online videos
The easiest way of using videos is to embed them from an online platform, such as YouTube or Vimeo. When embedding, make sure you place the embed code inside an element with the class of .embed-container. This will ensure a responsive video.
Embedding YouTube videos
<div class="embed-container">
<iframe src='https://www.youtube.com/embed/mcvqOUtcAJg' frameborder='0' allowfullscreen></iframe>
</div> <!-- end .embed-container -->
Embedding Vimeo videos
<div class="embed-container">
<iframe src="https://player.vimeo.com/video/176916362" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div> <!-- end .embed-container -->
Using a video placeholder
Video placeholders should be used when you don't want to embed a video right away and instead you want to display your own image with a play button on top. Clicking that play button will then open the embeddable video.
<div class="section flush-top">
<div class="video-simulator">
<div class="placeholder">
<a href="https://www.youtube.com/embed/mcvqOUtcAJg?autoplay=true" data-presentation-video>
<img src="assets/img/default-video-background.jpg" alt="Placeholder">
<div class="icon large light">
<i class="image icon-play-light"></i>
</div> <!-- end .icon -->
</a>
</div> <!-- end .placeholder -->
</div> <!-- end .video-simulator -->
</div> <!-- end .section -->
Please note that the lightbox script doesn't work inside this documentation. See the official demo pages.
Helper classes
| Class | Description | Code & preview |
|---|---|---|
small |
Sets the video simulator width to 12rem. |
|
faded |
Adds a fading effect to the main image. |
|