Silicon Silicon UI Kit
 Buy now

Video popup

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

Silicon component

Play button

Click me to watch video! 
<!-- Play button with label -->
<div class="d-flex align-items-center">
  <a href="https://www.youtube.com/watch?v=vTgKtoU--Z8" class="btn btn-video btn-icon" data-bs-toggle="video">
    <i class="bx bx-play"></i>
  </a>
  <span class="fs-sm text-muted ps-3">Click me to watch video!</span>
</div>

Sizing

<!-- Extra large button -->
<a href="https://www.youtube.com/watch?v=vTgKtoU--Z8" class="btn btn-video btn-icon btn-xl" data-bs-toggle="video">
  <i class="bx bx-play"></i>
</a>

<!-- Large button -->
<a href="https://www.youtube.com/watch?v=vTgKtoU--Z8" class="btn btn-video btn-icon btn-lg" data-bs-toggle="video">
  <i class="bx bx-play"></i>
</a>

<!-- Regular button -->
<a href="https://www.youtube.com/watch?v=vTgKtoU--Z8" class="btn btn-video btn-icon" data-bs-toggle="video">
  <i class="bx bx-play"></i>
</a>

<!-- Small button -->
<a href="https://www.youtube.com/watch?v=vTgKtoU--Z8" class="btn btn-video btn-icon btn-sm" data-bs-toggle="video">
  <i class="bx bx-play"></i>
</a>

On top of the image

Click me to watch video!
<!-- Video button on top of the image -->
<div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url(assets/img/landing/software-company/case-study01.jpg);">
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-60"></span>
  <div class="position-relative text-center zindex-5 px-3 py-4 py-sm-5 my-lg-5">
    <a href="https://www.youtube.com/watch?v=vTgKtoU--Z8" class="btn btn-video btn-icon bg-white btn-xl mb-2" data-bs-toggle="video">
      <i class="bx bx-play"></i>
    </a>
    <div class="fs-sm text-white opacity-75">Click me to watch video!</div>
  </div>
</div>

Inside card

Card image
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 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-50"></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=vTgKtoU--Z8" class="btn btn-video btn-icon bg-white stretched-link" data-bs-toggle="video">
        <i class="bx bx-play"></i>
      </a>
    </div>
    <img src="assets/img/landing/financial/services/02.jpg" class="card-img-top" alt="Card image">
  </div>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text fs-sm">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-sm btn-primary">Go somewhere</a>
  </div>
</div>
Top