How to make this background video in div with text overlay work?

HTML-CSS
1

I’m trying to make an ad banner with background video in middle of a webpage. It has to be responsive. First of all, the code is not showing anything outside my system (neither in jsfiddle or codepen), secondly, the video is not playing. Also about accomodating the overlay div: I’m quite sure my method is neither modern nor scalable. But this is all I could think of. What I’m doing wrong and how to fix it? Would like some help. Thanks.

<section id="ad-section">
  <div id="ad-container">
    <video playsinline muted loop autoplay id="ad-video" poster="https://user-images.githubusercontent.com/48395777/101530543-0f656100-39b8-11eb-9d67-359ac0fea751.png">
      <source src="https://player.vimeo.com/video/479469688?title=0&portrait=0&byline=0&autoplay=1" type="video/mp4">
    </video>
    <div id="ad-content">
      <h3>Christms sale</h3>
      <p>Loremipsum dolor sit amet</p>
      <button id="primary-button">Button</button>
    </div>
  </div>
</section>

#ad-section {
  padding: 0 15rem;
  margin: 0 auto;
}

#ad-container {
  width: 100%;
  height: 800px;
  display: flex;
  position: relative;
  overflow: hidden;
  align-content: flex-end;
}

#ad-video {
  position: relative;
  object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: -1;
}

#ad-content {
  position: absolute;
  color: #fff;
  margin: 20rem 10rem;
  padding: 5rem;
  background-color: #000;
  align-self: flex-end;
  border-radius: 2rem; /*This is only working on one corner*/
}

PS. my code editor(Brackets) is giving html error about the video tag having source tag inside and giving css error for using the backdrop-filter.

Reference Image I’m trying to create: The background called “Sale” should be a video.

1746×956