Fancybox 3

Download:  Tại đây

Demo: yensaobionest

**** CODE

<a data-fancybox="gallery32" data-caption="Tổ yến" href="1.jpg">
<img src="1.jpg">
</a>

<a data-fancybox="gallery32" data-caption="Tổ yến" href="2.jpg">
       <img src="2.jpg">
</a>

<a data-fancybox="gallery32" data-caption="Tổ yến" href="3.jpg">
<img src="3.jpg">
</a>

**** JS

<script type="text/javascript">

$(document).ready(function(a){

$('[data-fancybox="gallery<?php echo $pid;?>"]').fancybox({

    loop : true,

    buttons: [

    "zoom",

    "share",

    "slideShow",

    "fullScreen",

    "download",

    "thumbs",

    "close"

], 

animationEffect: "zoom-in-out",

transitionEffect: "circular",

    });

});

</script>

button hover + fancybox

Download: tại đây

**** HTML:
<div id="company-video" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item">
            <div class="video-wrap">
                <img src="https://www.cnzpack.com/templates/en/images/company-01.jpg" alt="">
                <a class="link-circle" data-fancybox="" href="https://www.youtube.com/embed/169UDJgxla8">
                    <span><i class="fa fa-play"></i></span></a>
            </div>
        </div>
    </div>
</div>

****CSS:
.video-wrap { position: relative; }
.video-wrap img { border-radius: 100%; transform: scale(0.99); }
.video-wrap::after { content: ""; position: absolute; width: 100%; height: 100%; box-shadow: 0 0 10px 10px rgba(255,255,255,1) inset; left: 0; top: 0; border-radius: 100%; z-index: 0; }
.video-wrap .link-circle { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); line-height: 0; z-index: 999; }
.video-wrap .link-circle span { display: inline-block; width: 60px; height: 60px; background: rgba(213,26,49,0.8); border-radius: 100%; position: relative; transition: 0.3s; -webkit-transition: 0.3s; color: #222; }
.video-wrap .link-circle span:before { position: absolute; content: ''; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; background: #fff; -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 0; transition: 0.3s; -webkit-transition: 0.3s; }
.video-wrap .link-circle span i { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-35%, -50%); transform: translate(-35%, -50%); color: #fff; }
.video-wrap .link-circle span:hover { transform: scale(1.2); -webkit-transform: scale(1.2); }
.video-wrap .link-circle span:hover i { color: #d51a31; }
.video-wrap .link-circle span:hover:before { opacity: 1; transform: scale(.85); -webkit-transform: scale(.85); }

Fancybox video

download: tại đây
linkweb: http://suacelia.com/videos.html