The sample

×

The code

<style>
    .col-xs-12.partitle {
        text-align: center;
        padding: 38px;
        font-size: 28px;
        text-transform: uppercase;
        font-family: 'Spartan';
    }
    .trailer{margin-top:20px;margin-left:20px;margin-right:20px;padding:20px;}
    .trailer .title{ font-size:14px;font-family: 'Spartan';
        font-weight:bold; 
        margin-top:20px;
    }
    .trailer .titled{ font-size:12px;font-family: 'Spartan';
        font-weight:normal;
    }
    .lifeunderpar .banner{background:#222;position:relative;}
    
    /*******************Video main********************/
    
    .video-play-buttonm {
      position: absolute;
      z-index: 10;
      top:50%;
      left:50%;
      transform: translateX(-50%) translateY(-50%);
      box-sizing: content-box;
      display: block;
      width: 32px;
      height: 44px;
      /* background: #fa183d; */
      border-radius: 50%;
      padding: 18px 20px 18px 28px;
    }
    
    .video-play-buttonm:before {
      content: "";
      position: absolute;
      z-index: 0;
      left: 50%;
      top:50%;
      transform: translateX(-50%) translateY(-50%);
      display: block;
      width: 80px;
      height: 80px;
      background: transparent;
      border-radius: 50%;
      border:4px solid #ffffff;
      /*animation: pulse-border 1500ms ease-out infinite;*/
    }
    
    .video-play-buttonm:after {
      content: "";
        position: absolute;
        z-index: 1;
        left: 50%;
        top:50%;
        transform: translateX(-50%) translateY(-50%);
        display: block;
        width: 15px;
        height: 15px;
        background: #652dd314;
        border-radius: 0;
        transition: all 200ms;
        border-left: 24px solid #fff;
        border-top:16px solid transparent;
        border-bottom: 16px solid transparent;
    }
    
    }
    
    .video-play-buttonm:hover:after {
      background-color: darken(#fa183d, 10%);
    }
    
    .video-play-buttonm img {
      position: relative;
      z-index: 3;
      max-width: 100%;
      width: auto;
      height: auto;
    }
    
    .video-play-buttonm span {
     /* display: block;*/
     /* position: relative;*/
     /* z-index: 3;*/
     /* width: 0;*/
     /* height: 0;*/
     /* border-left: 32px solid #fff;*/
        /*border-top:22px solid transparent;*/
        /*border-bottom: 22px solid transparent;*/
    }
    
    @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-overlaym {
      position: fixed;
      z-index: -1;
      top:100px;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0,0,0,0.80);
      opacity: 0;
      transition: all ease 500ms;
    }
    
    .video-overlaym.open {
      position: fixed;
      z-index: 1000;
      opacity: 1;
    }
    
    .video-overlaym-close {
      position: absolute;
      z-index: 1000;
      top:15px;
      right: 20px;
      font-size: 36px;
      line-height: 1;
      font-weight: 400;
      color: #fff;
      text-decoration: none;
      cursor: pointer;
      transition: all 200ms;
    }
    
    .video-overlaym-close:hover {
      color: #fa183d;
    }
    
    .video-overlaym iframe {
      position: absolute;
      top:50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      /* width: 90%; */
      /* height: auto; */
      box-shadow: 0 0 15px rgba(0,0,0,0.75);
    }
    /*******************Video end********************/
    .ytimg{
           height: 100%;
        width: 100%;
        max-width: 100%;
        max-height:100%;
        position:relative;
    }
    .row.trailer > div {
        margin-bottom: 25px;
    }
   

    
    @media only screen and (max-width: 500px) {
        .trailer{margin-top:20px;margin-left:8px;margin-right:8px;padding:20px;}
        
    }
    </style>
    
    <div class="container-fluid">
        <div class="lifeunderpar" >
            <div class="banner">
                <img src="https://www.webmentor.in/wp-content/uploads/2019/10/cropped-qtq50-ytdL78.jpeg" />
               
                <a id="play-videom" class="video-play-buttonm" href="#">
                    <span></span>
                </a>
                <div id="video-overlaym" class="video-overlaym">
                <a class="video-overlaym-close">&times;</a>
                </div>
            </div>
        </div>
        
    </div>
    
    <script>
        jQuery('#play-videom').on('click', function(e){
      e.preventDefault();
      jQuery('#video-overlaym').addClass('open');
      jQuery("#video-overlaym").append('<iframe width="100%" height="480" src="https://www.youtube.com/embed/aUw3vDdy8wk" frameborder="0" allowfullscreen></iframe>');
    });
    
    jQuery('.video-overlaym, .video-overlaym-close').on('click', function(e){
      e.preventDefault();
      close_videom();
    });
    
    jQuery(document).keyup(function(e){
      if(e.keyCode === 27) { close_videom(); }
    });
    
    function close_videom() {
      jQuery('.video-overlaym.open').removeClass('open').find('iframe').remove();
    };
    </script>