Full-screen HTML5 Video Background Blur

by rttmax

HTML

<div class="container">
  <div class="backdrop"></div>
  <video class="videobg" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
    <source src="https://visionsbox.de/assets/cms/projects/kompromisslose-beleuchtung/tevisio_DE.mp4" type="video/mp4">
    Sorry, your browser does not support HTML5 video.
  </video>
</div>

SCSS

body{ margin:0;}

.container {
    --blur : 20px;
		width: 200px;
		height: 200px;
    position: relative;
    overflow: hidden;
    background:red;
}
.videobg {
  
	 position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   object-fit: cover;
   display: block;
   overflow: hidden;
   
  @supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {  
     // firefox, ...
     filter: blur(var(--blur));
     object-fit: cover;
     top: calc(-2 * var(--blur));
     left: calc(-2 * var(--blur));
     height: calc(100% + 4 * var(--blur));
     width: calc(100% + 4 * var(--blur));
   }
}

.backdrop{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;

 
    @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
      // chrome, edge, safari, ...
      backdrop-filter: blur(var(--blur));
    }
}