Lightbox Video

Lightbox video modules which can be set in different styles

The lightbox video has 2 styles of play button that you can define it with play-btn play-btn-hover-animate and play-btn play-btn-auto-animate classes, also you can set the size of play button with .play-btn-sm and .play-btn-lg classes as below, if you leave it blank the button will display in a medium size.

<a data-fancybox="" href="YOUR YOUTUBE OR VIMEO LINK" class="play-btn play-btn-hover-animate">
    ....
</a>

AND
 
<a data-fancybox="" href="YOUR YOUTUBE OR VIMEO LINK" class="play-btn play-btn-auto-animate">
    ....
</a>

Also you can set the size of play button with .play-btn-sm and .play-btn-lg classes as below, if you leave it blank the button will display in a medium size.

<a data-fancybox="" href="YOUR YOUTUBE OR VIMEO LINK" class="play-btn play-btn-hover-animate play-btn-lg">
    ....
</a>
Hover Animate Player
image 
<div class="card lightbox-video d-block border-0 rounded-xl shadow-lg bg-transparent text-center mb-5">
    
    <img class="card-img" src="../../assets/images/upload/thumbnail-image-1246x830-01.jpg" alt="image">

    <div class="card-img-overlay d-flex align-items-center justify-content-center">

        <a data-fancybox="" href="https://vimeo.com/18384057" class="play-btn play-btn-lg play-btn-hover-animate">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="100px" width="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
                <path class="play-stroke" fill="none" stroke="#fff" d="M49.9,2.5C23.6,2.8,2.1,24.4,2.5,50.4C2.9,76.5,24.7,98,50.3,97.5c26.4-0.6,47.4-21.8,47.2-47.7C97.3,23.7,75.7,2.3,49.9,2.5"></path>
                <path class="play-icon" fill="#fff" d="M39.855,36.68c0-2.2,1.559-3.1,3.464-2L66.39,48c1.905,1.1,1.905,2.9,0,4l-23.071,13.32c-1.905,1.1-3.464,0.2-3.464-2L39.855,36.68z"></path>
            </svg>
        </a>

        <div class="lightbox-video-overlay"></div>

    </div>

</div>
Auto Animate Player
image 
<div class="card lightbox-video d-block border-0 rounded-xl shadow-lg bg-transparent text-center mb-5">
    
    <img class="card-img" src="../../assets/images/upload/thumbnail-image-1246x830-02.jpg" alt="image">

    <div class="card-img-overlay d-flex align-items-center justify-content-center">

        <a data-fancybox="" href="https://vimeo.com/104710035" class="play-btn play-btn-lg play-btn-auto-animate">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="100px" width="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
                <path class="play-stroke" fill="#2196f3" stroke="none" d="M49.9,2.5C23.6,2.8,2.1,24.4,2.5,50.4C2.9,76.5,24.7,98,50.3,97.5c26.4-0.6,47.4-21.8,47.2-47.7C97.3,23.7,75.7,2.3,49.9,2.5"></path>
                <path class="play-icon" fill="#fff" d="M39.855,36.68c0-2.2,1.559-3.1,3.464-2L66.39,48c1.905,1.1,1.905,2.9,0,4l-23.071,13.32c-1.905,1.1-3.464,0.2-3.464-2L39.855,36.68z"></path>
            </svg>
        </a>

        <div class="lightbox-video-overlay"></div>

    </div>

</div>

Quickly Build Your Impressive Website

Bootstrap 4 multipurpose template with a lots of unique modules and useful features.