Video player

—  Responsive YouTube and Vimeo video players inside lightbox triggered by specially styled button.

Play button with label

Click me to watch video!
<!-- Play button triggers lightbox with video player -->
<a href="https://player.vimeo.com/video/VIDEO_ID?color=5c77fc&title=0&byline=0&portrait=0" class="video-player-btn my-3 mr-3" data-fancybox data-width="1000" data-height="563">
  <i data-feather="play"></i>
</a>
<span class="video-player-label">Click me to watch video!</span>
// Play button triggers lightbox with video player
a(href="https://player.vimeo.com/video/93641234?color=5c77fc&title=0&byline=0&portrait=0", data-fancybox, data-width="1000", data-height="563").video-player-btn.my-3.mr-3
  i(data-feather="play")
span.video-player-label Click me to watch video!

On top of the image


Click me to watch video!
<!-- Play button on top of the image -->
<div class="position-relative bg-size-cover bg-position-center text-center py-5" style="background-image: url(path-to-image);">
  <span class="bg-overlay" style="opacity: .1;"></span>
  <div class="bg-overlay-content px-3 py-5 my-sm-5">
    <a href="https://player.vimeo.com/video/VIDEO_ID?color=5c77fc&title=0&byline=0&portrait=0" class="video-player-btn my-3 mr-3" data-fancybox data-width="1000" data-height="563">
      <i data-feather="play"></i>
    </a>
    <br>
    <span class="video-player-label text-white opacity-90">Click me to watch video!</span>
  </div>
</div>
// Play button on top of the image
.position-relative.bg-size-cover.bg-position-center.text-center.py-5(style="background-image: url(path-to-image);")
  span.bg-overlay(style="opacity: .1;")
  .bg-overlay-content.px-3.py-5.my-sm-5
    a(href="https://player.vimeo.com/video/VIDEO_ID?color=5c77fc&title=0&byline=0&portrait=0", data-fancybox, data-width="1000", data-height="563").video-player-btn.my-2.mr-3
      i(data-feather="play")
    br
    span.video-player-label.text-white.opacity-90 Click me to watch video!