<div class="intro">
  <div class="intro_media">
    <video class="intro_media-video" src="video/video_bg.mp4" autoplay="" muted="" loop=""></video>
  </div>
  <div class="intro_content">
Relax and trust us!
  </div>
</div>

.intro {
  position: relative;
  height: 400px;
}
.intro::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}
.intro_media {
  position: absolute;
  overflow: hidden;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
.intro_media-video {
  position: absolute;
  top: 0;
  left: 0;
}
.intro_content {
  display: flex;
  position: relative;
  height: 400px;
  z-index: 3;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 48px;
  color: #fff;
}

function setVideoCenter() {
  var $box = $('.main__video');
  var height = $box.height();
  var width = $box.width();
  var new_height = width / 2.66666;
  if (new_height > height) {
    $box.find('.main__media').css({
      width: width, 
      height: new_height, 
      top: '-' + (new_height / 2 - height / 2) + 'px',
      left: '0',
    }); 
  } else {
    var new_width = height * 2.66666;
    $box.find('.main__media').css({
      width: new_width, 
      height: height, 
      top: '0',
      left: '-' + (new_width / 2 - width / 2) + 'px'
    });
  } 
}
 
$(function(){
  setVideoCenter();
  $(window).resize(setVideoCenter);
});