Resize the video so it covers the whole wrapper but keeps its aspect ratio

code.html

<div class="video-wrapper video-wrapper--js">
    <div class="video video--js">
        <div class="w-100 h-100 embed-responsive">
            <iframe src="https://player.vimeo.com/video/542626427?autoplay=1&loop=1&color=ffffff&title=0&byline=0&portrait=0&muted=1&dnt=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe><script src="https://player.vimeo.com/api/player.js"></script>
        </div>
    </div>
</div>

script.js

function calculateVideo() {
    // Set variables
    var videoWrapperHeight = $('.video-wrapper--js').height();
    var videoWrapperWidth = $('.video-wrapper--js').width();
    var videoContainerWidth = null;
    var videoContainerHeight = null;
    var videoContainer = $('.video--js');
    // Check if video should overlap in height or in width using 16:9 ratio
    if(videoWrapperHeight < (videoWrapperWidth * 0.5625)) {
        // Calculate dimensions
        videoContainerWidth = videoWrapperWidth;
        videoContainerHeight = videoWrapperWidth * 0.5625;
    } else {
        // Calculate dimensions
        videoContainerWidth = videoWrapperHeight * 1.7778;
        videoContainerHeight = videoWrapperHeight;
    }
    videoContainer.css({
        'width' : videoContainerWidth,
        'height' : videoContainerHeight
    });
}

$(document).ready(function(){
    calculateVideo();
});

$(window).on('resize', function(){
    calculateVideo();
});

style.scss

.video-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
  }

 .video {
    position: absolute;
    top: 50%;
    right: 0;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
  }