AddHTMLHTML

                  
  <div class="banner_video">
      <div class="embed-container">
          <iframe width="300" height="150" src="https://player.vimeo.com/video/41985092?title=0&byline=0&portrait=0&transparent=0&autoplay=1&loop=1&background=1" id="home-video" allow="autoplay; fullscreen" frameborder="0" title="" data-ready="true"></iframe>
          </div>
      <div class="slider_content">
          <div class="popup" data-type="bgtrans">
              <div class="row">
                  <div class="col-sm-12">
                  <h1>Annual Virtual Event</h1>
                  <h4 id="date-info"><span class="eventDate"> January 25 -28, 2023</span> <span class="eventTime">9:00 am to 5:00 pm (EST)</span></h4>
                  <div class="two-btns"><a href="#LoginModal" data-toggle="modal" data-type="btn"> <i class="fa fa-lock" aria-hidden="true"></i> Login </a> <a href="/en/registration" data-type="btn"> <i class="fa fa-pencil" aria-hidden="true"></i> Register Now </a></div>
                  </div>
              </div>
          </div>
      </div>
  </div>

AddCSSCSS

                  
  .embed-container {
      position: relative;
      padding-bottom: 56.25%;
      height: 0;
      overflow: hidden;
      max-width: 100%;
      height: 100%;
  }
  
  
  .banner_video iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }
  
  
  .slider_content {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
      background-color: rgba(0, 0, 0, .4);
  }
  
  @media (max-width: 767px) {
      .slider_content {
          position: relative;
          height: auto;
      }
  
      .banner_video {
          height: auto;
      }
  }