CSS ile yazı içinde video oynatma

Merhaba değerli okurlarımız, bugün yazıya video maskelemeyi göstereceğiz, seçtiğimiz bir video yazının içinde oynatılacak. Sizi fazla tutmadan uygulamaya geçelim.

HTML Kodları

<section class="showcase">
   <video src="video.mp4" autoplay loop muted></video>
     <h1 class="title">BEYOND</h1>
</section>

CSS Kodları

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');

body{
  background-color: #000;
}

.showcase {
  width: 100%;
  height: 100vh;
  position: relative;
}

.showcase video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
}

.title {
  width: 100%;
  height: 100%;
  background-color: #000;
  font-family: 'Montserrat', sans-serif;
  font-size: 100px;
  color: #fff;
  mix-blend-mode: multiply;
}