Добавление адаптивного видео с затемнением

HTML

<div class="video-bg">
    <video class="video" autoplay loop="yes" muted preload="auto">
        <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
        <source src="video.ogv" type='video/webm; codecs="vp8, vorbis"'>
        <source src="video.webm" type='video/ogg; codecs="theora, vorbis'>
    </video>
</div>

Less

.video-bg {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
  .video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
/* 1. No object-fit support: */
@media (min-aspect-ratio: 16/9) {
  .video-bg .video { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-bg .video { width: 300%; left: -100%; }
}
/* 2. If supporting object-fit, overriding (1): */
@supports (object-fit: cover) {
  .video-bg .video {
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }
}

.overlay{
  background-color: rgba(0,0,0,.45);
  z-index: 1;
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
 }

Support IE9+

Решение взято с http://fvsch.com/code/video-background/