Video

Components and examples on how to place a video in your page, from your server or video sharing services.

Local videos

While it's always better to host your videos on a video sharing website, but we provided a sample for you to include local videos in your pages.

<div class="video-wrapper">
  <div class="poster" style="background-image: url(../assets/img/video/1.jpg)"></div>
  <button class="btn btn-circle btn-lg btn-danger"><i class="fa fa-play"></i></button>
  <video src="../assets/img/video/1.mp4" poster="../assets/img/video/1.jpg" controls></video>
</div>
Markup
Copy

Embedded videos

You can easily embed your hosted videos inside your page with a pretty and minimal interface.

<div class="video-wrapper ratio-16x9">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/M5S_JBRjd1s?rel=0&showinfo=0" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
Markup
Copy