Silicon UI Kit

##### Menu

Preview Docs

### Content

Typography Icon font Code Images & figures Tables

### Components

Accordion Alerts Audio player Badges Blog components Breadcrumb Buttons Button group Cards Carousel (Slider) Collapse Dropdowns Forms Gallery (Lightbox) Image comparison slider Input group List group Modal Navbar Offcanvas Pagination Parallax Pills Placeholders Popovers Portfolio components Pricing Progress bars Social buttons Spinners Steps Tabs Team Testimonials / reviews Toasts Tooltips Video popup

### Utilities

Bootstrap Silicon

# Video popup

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

Silicon component

Video popup component relies on 3rd party plugin. Make sure to link to Light Gallery css and js files in your document:
assets/vendor/lightgallery/css/lightgallery-bundle.min.css, assets/vendor/lightgallery/lightgallery.min.js and assets/vendor/lightgallery/plugins/video/lg-video.min.js.

Use this page as a reference.

## 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 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