<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="video-icon"> <a href="https://www.youtube.com/watch?v=I5FlP07kdvM" data-lightgallery="item"><i class="mdi mdi-play"></i></a> </div>

@keyframes pulse-border { 0% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; } } .video-icon { left: 50%; position: absolute; top: 51%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); span { display: none; } a { text-align: center; display: inline-block; position:relative; z-index:99; &::before { content: ""; position: absolute; left: 50%; top: 50%; height: 99px; width: 99px; background: #FFC107; z-index: -1; border-radius: 50%; transform: translate(-50%,-50%); animation: pulse-border 1500ms ease-out infinite; } i { background: rgba(255, 255, 255, 0.90); height: 100px; width: 100px; top: 50%; left: 0; right: 0; margin: auto; text-align: center; border-radius: 50%; line-height: 100px; color: #fff; font-size: 46px; position: relative; background-image: linear-gradient(to right top, #FF9800, #FFC107, #FFC107, #FFC107, #FF9800); } } }