<div class="video-wrapper">
  <div class="video-container">
    <video  class="video-1" controls autoplay webkit-playsinline playsinline loop muted>
      <source
        src="https://demo.get-web.site/videos/website-video-background-krakatau.webm" type="video/webm">
    </video>

    <video class="video-2" controls autoplay webkit-playsinline playsinline loop muted>
      <source
        src="https://demo.get-web.site/videos/website-video-background-krakatau.webm" type="video/webm">
    </video>
  </div>
</div>

body {
  background: black;
  margin: 0;
  padding: 0;
}
 
.video-wrapper {
  display: flex;justify-content: center;align-items: center;flex-wrap: wrap;
  max-width: 100%;
  overflow: hidden;
}

.video-container {
  position: relative;
  z-index: 0;
  height: 100vh;
  display: inline-block;
}

.video-1  {
/*   position: absolute;
  left: 0;
  top: 0; */
/*   object-fit: cover; */
  min-width: 100%;
  width: auto;
  height: 100vh;
  overflow: hidden;
/*  z-index: 11; */
}

.video-2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
   filter: blur(10px);
  clip-path: polygon(0 70%, 100% 70%, 100% 100%, 0% 100%);
}