video-bg-blur.html

<!--
*   @title  Video background blur
*   @desc   Shows a background of the video on the sides if screen is larger than 1200px
-->

<!-- CSS -->
<style>
.video-container {
    display: flex;
    justify-content: center;
    position: relative;
}

.video-container #video {
    width: min(1200px, 100%);
    cursor: pointer;
}

.video-container #video-bg {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    max-height: 100%;
    overflow: hidden;
    object-fit: fill;
    filter: blur(10px);
    z-index: -1000;
}

.play-btn-container.hide {
    display: none;
}

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 50px;
    width: 50px;
    transform: translate(-50%, -50%);
}
</style>

<!-- HTML -->
<div class="video-container">
  <video id="video">
      <source src="a/11423" type="video/mp4"> Your browser does not support the video tag.
  </video>
  <video id="video-bg">
      <source src="a/11423" type="video/mp4">
  </video>
  <div class="play-btn-container">
      <img src="a/11424" class="play-btn" alt="Play button" />
  </div>
</div>

<!-- Javascript -->
<script>
    const videoContainer = document.querySelector('.video-container')
    const video = document.querySelector('#video')
    const videoBg = document.querySelector('#video-bg')
    const playBtn = document.querySelector('.play-btn-container')

    videoContainer.addEventListener('click', () => {
        if (video.paused) {
            video.play()
            videoBg.play()
            playBtn.classList.add('hide')
        } else {
            video.pause()
            videoBg.pause()
            playBtn.classList.remove('hide')
        }
    })
</script>