Video popup

Responsive YouTube video player inside lightbox triggered by specially styled button.

Around component

The Video popup is dependent on a 3rd-party plugin. Please ensure that you include the Light Gallery CSS and JavaScript files in your document:

assets/vendor/lightgallery/css/lightgallery-bundle.min.css
assets/vendor/lightgallery/lightgallery.min.js
assets/vendor/lightgallery/plugins/video/lg-video.min.js

For guidance and examples, please refer to this page as a reference.

Click me to watch video!

<!-- Play button with label -->
<div class="d-flex align-items-center">
  <a href="https://www.youtube.com/watch?v=UHQPdP8qgrk" class="btn btn-icon btn-primary rounded-circle" data-bs-toggle="video" aria-label="Play video">
    <i class="ai-play-filled"></i>
  </a>
  <span class="fs-sm ps-3">Click me to watch video!</span>
</div>

Types and colors

Preview
HTML

<!-- Primary solid video button -->
<a href="https://www.youtube.com/watch?v=UHQPdP8qgrk" class="btn btn-icon btn-primary rounded-circle" data-bs-toggle="video" aria-label="Play video">
  <i class="ai-play-filled"></i>
</a>

<!-- Secondary solid video button -->
<a href="https://www.youtube.com/watch?v=UHQPdP8qgrk" class="btn btn-icon btn-secondary rounded-circle" data-bs-toggle="video" aria-label="Play video">
  <i class="ai-play-filled"></i>
</a>

<!-- Success solid video button -->
<a href="https://www.youtube.com/watch?v=UHQPdP8qgrk" class="btn btn-icon btn-success rounded-circle" data-bs-toggle="video" aria-label="Play video">
  <i class="ai-play-filled"></i>
</a>

<!-- Danger solid video button -->
<a href="https://www.youtube.com/watch?v=UHQPdP8qgrk" class="btn btn-icon btn-danger rounded-circle" data-bs-toggle="video" aria-label="Play video">
  <i class="ai-play-filled"></i>
</a>

<!-- Warning solid video button -->
<a href="https://www.youtube.com/watch?v=UHQPdP8qgrk" class="btn btn-icon btn-warning rounded-circle" data-bs-toggle="video" aria-label="Play video">
  <i class="ai-play-filled"></i>
</a>

<!-- Info solid video button -->
<a href="https://www.youtube.com/watch?v=UHQPdP8qgrk" class="btn btn-icon btn-info rounded-circle" data-bs-toggle="video" aria-label="Play video">
  <i class="ai-play-filled"></i>
</a>

<!-- Dark solid video button -->
<a href="https://www.youtube.com/watch?v=UHQPdP8qgrk" class="btn btn-icon btn-dark rounded-circle" data-bs-toggle="video" aria-label="Play video">
  <i class="ai-play-filled"></i>
</a>

<!-- Light solid video button -->
<a href="https://www.youtube.com/watch?v=UHQPdP8qgrk" class="btn btn-icon btn-light rounded-circle" data-bs-toggle="video" aria-label="Play video">
  <i class="ai-play-filled"></i>
</a>

<!-- Primary outline video button -->
<a href="https://www.youtube.com/watch?v=UHQPdP8qgrk" class="btn btn-icon btn-outline-primary rounded-circle" data-bs-toggle="video" aria-label="Play video">
  <i class="ai-play-filled"></i>
</a>

<!-- Secondary outline video button -->
<a href="https://www.youtube.com/watch?v=UHQPdP8qgrk" class="btn btn-icon btn-outline-secondary rounded-circle" data-bs-toggle="video" aria-label="Play video">
  <i class="ai-play-filled"></i>
</a>

<!-- Success outline video button -->
<a href="https://www.youtube.com/watch?v=UHQPdP8qgrk" class="btn btn-icon btn-outline-success rounded-circle" data-bs-toggle="video" aria-label="Play video">
  <i class="ai-play-filled"></i>
</a>

<!-- Danger outline video button -->
<a href="https://www.youtube.com/watch?v=UHQPdP8qgrk" class="btn btn-icon btn-outline-danger rounded-circle" data-bs-toggle="video" aria-label="Play video">
  <i class="ai-play-filled"></i>
</a>

<!-- Warning outline video button -->
<a href="https://www.youtube.com/watch?v=UHQPdP8qgrk" class="btn btn-icon btn-outline-warning rounded-circle" data-bs-toggle="video" aria-label="Play video">
  <i class="ai-play-filled"></i>
</a>

<!-- Info outline video button -->
<a href="https://www.youtube.com/watch?v=UHQPdP8qgrk" class="btn btn-icon btn-outline-info rounded-circle" data-bs-toggle="video" aria-label="Play video">
  <i class="ai-play-filled"></i>
</a>

<!-- Dark outline video button -->
<a href="https://www.youtube.com/watch?v=UHQPdP8qgrk" class="btn btn-icon btn-outline-dark rounded-circle" data-bs-toggle="video" aria-label="Play video">
  <i class="ai-play-filled"></i>
</a>

<!-- Light outline video button -->
<a href="https://www.youtube.com/watch?v=UHQPdP8qgrk" class="btn btn-icon btn-outline-light rounded-circle" data-bs-toggle="video" aria-label="Play video">
  <i class="ai-play-filled"></i>
</a>

Sizing

Preview
HTML

<!-- Extra large video button -->
<a href="https://www.youtube.com/watch?v=UHQPdP8qgrk" class="btn btn-icon btn-xl btn-primary rounded-circle" data-bs-toggle="video" aria-label="Play video">
  <i class="ai-play-filled"></i>
</a>

<!-- Large video button -->
<a href="https://www.youtube.com/watch?v=UHQPdP8qgrk" class="btn btn-icon btn-lg btn-primary rounded-circle" data-bs-toggle="video" aria-label="Play video">
  <i class="ai-play-filled"></i>
</a>

<!-- Regular video button -->
<a href="https://www.youtube.com/watch?v=UHQPdP8qgrk" class="btn btn-icon btn-primary rounded-circle" data-bs-toggle="video" aria-label="Play video">
  <i class="ai-play-filled"></i>
</a>

<!-- Small video button -->
<a href="https://www.youtube.com/watch?v=UHQPdP8qgrk" class="btn btn-icon btn-sm btn-primary rounded-circle" data-bs-toggle="video" aria-label="Play video">
  <i class="ai-play-filled"></i>
</a>

On top of the image

Preview
HTML

<!-- Video button on top of the image example -->
<div class="position-relative">
  <img src="assets/img/landing/product/video-cover.jpg" class="d-block rounded-5" alt="Video cover">
  <div class="d-nline-flex position-absolute top-50 start-50 translate-middle z-2 p-4">
    <a href="https://www.youtube.com/watch?v=udMULpKcnn8" class="btn btn-icon btn-xl btn-primary rounded-circle stretched-link" data-bs-toggle="video" aria-label="Play video">
      <i class="ai-play-filled"></i>
    </a>
  </div>
</div>

Inside card

Preview
HTML

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

<!-- Video button on top of the card image -->
<div class="card overflow-hidden">
  <div class="position-relative">
    <span class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-20"></span>
    <div class="d-flex align-items-center justify-content-center position-absolute top-0 start-0 w-100 h-100 z-2">
      <a href="https://www.youtube.com/watch?v=UHQPdP8qgrk" class="btn btn-icon btn-primary rounded-circle stretched-link" data-bs-toggle="video" aria-label="Play video">
        <i class="ai-play-filled"></i>
      </a>
    </div>
    <img src="assets/img/landing/web-studio/industries/03.jpg" class="card-img-top" alt="Card image">
  </div>
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Menu

Content

Components