Video popup

<!-- 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">
    <i class="ai-play-filled"></i>
  </a>
  <span class="fs-sm ps-3">Click me to watch video!</span>
</div>

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

<!-- 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">
  <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">
  <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">
  <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">
  <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">
  <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">
  <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">
  <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">
  <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">
  <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">
  <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">
  <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">
  <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">
  <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">
  <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">
  <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">
  <i class="ai-play-filled"></i>
</a>

// Primary solid video button
a(href="https://www.youtube.com/watch?v=UHQPdP8qgrk", data-bs-toggle="video").btn.btn-icon.btn-primary.rounded-circle
  i.ai-play-filled

// Secondary solid video button
a(href="https://www.youtube.com/watch?v=UHQPdP8qgrk", data-bs-toggle="video").btn.btn-icon.btn-secondary.rounded-circle
  i.ai-play-filled

// Success solid video button
a(href="https://www.youtube.com/watch?v=UHQPdP8qgrk", data-bs-toggle="video").btn.btn-icon.btn-success.rounded-circle
  i.ai-play-filled

// Danger solid video button
a(href="https://www.youtube.com/watch?v=UHQPdP8qgrk", data-bs-toggle="video").btn.btn-icon.btn-danger.rounded-circle
  i.ai-play-filled

// Warning solid video button
a(href="https://www.youtube.com/watch?v=UHQPdP8qgrk", data-bs-toggle="video").btn.btn-icon.btn-warning.rounded-circle
  i.ai-play-filled

// Info solid video button
a(href="https://www.youtube.com/watch?v=UHQPdP8qgrk", data-bs-toggle="video").btn.btn-icon.btn-info.rounded-circle
  i.ai-play-filled

// Dark solid video button
a(href="https://www.youtube.com/watch?v=UHQPdP8qgrk", data-bs-toggle="video").btn.btn-icon.btn-dark.rounded-circle
  i.ai-play-filled

// Light solid video button
a(href="https://www.youtube.com/watch?v=UHQPdP8qgrk", data-bs-toggle="video").btn.btn-icon.btn-light.rounded-circle
  i.ai-play-filled

// Primary outline video button
a(href="https://www.youtube.com/watch?v=UHQPdP8qgrk", data-bs-toggle="video").btn.btn-icon.btn-outline-primary.rounded-circle
  i.ai-play-filled

// Secondary outline video button
a(href="https://www.youtube.com/watch?v=UHQPdP8qgrk", data-bs-toggle="video").btn.btn-icon.btn-outline-secondary.rounded-circle
  i.ai-play-filled

// Success outline video button
a(href="https://www.youtube.com/watch?v=UHQPdP8qgrk", data-bs-toggle="video").btn.btn-icon.btn-outline-success.rounded-circle
  i.ai-play-filled

// Danger outline video button
a(href="https://www.youtube.com/watch?v=UHQPdP8qgrk", data-bs-toggle="video").btn.btn-icon.btn-outline-danger.rounded-circle
  i.ai-play-filled

// Warning outline video button
a(href="https://www.youtube.com/watch?v=UHQPdP8qgrk", data-bs-toggle="video").btn.btn-icon.btn-outline-warning.rounded-circle
  i.ai-play-filled

// Info outline video button
a(href="https://www.youtube.com/watch?v=UHQPdP8qgrk", data-bs-toggle="video").btn.btn-icon.btn-outline-info.rounded-circle
  i.ai-play-filled

// Dark outline video button
a(href="https://www.youtube.com/watch?v=UHQPdP8qgrk", data-bs-toggle="video").btn.btn-icon.btn-outline-dark.rounded-circle
  i.ai-play-filled

// Light outline video button
a(href="https://www.youtube.com/watch?v=UHQPdP8qgrk", data-bs-toggle="video").btn.btn-icon.btn-outline-light.rounded-circle
  i.ai-play-filled

<!-- 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">
  <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">
  <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">
  <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">
  <i class="ai-play-filled"></i>
</a>

// Extra large video button
a(href="https://www.youtube.com/watch?v=UHQPdP8qgrk", data-bs-toggle="video").btn.btn-icon.btn-xl.btn-primary.rounded-circle
  i.ai-play-filled

// Large video button
a(href="https://www.youtube.com/watch?v=UHQPdP8qgrk", data-bs-toggle="video").btn.btn-icon.btn-lg.btn-primary.rounded-circle
  i.ai-play-filled

// Regular video button
a(href="https://www.youtube.com/watch?v=UHQPdP8qgrk", data-bs-toggle="video").btn.btn-icon.btn-primary.rounded-circle
  i.ai-play-filled

// Small video button
a(href="https://www.youtube.com/watch?v=UHQPdP8qgrk", data-bs-toggle="video").btn.btn-icon.btn-sm.btn-primary.rounded-circle
  i.ai-play-filled

<!-- 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 zindex-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">
      <i class="ai-play-filled"></i>
    </a>
  </div>
</div>

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

<!-- 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 zindex-2">
      <a href="https://www.youtube.com/watch?v=UHQPdP8qgrk" class="btn btn-icon btn-primary rounded-circle stretched-link" data-bs-toggle="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>

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