How to make a video full width like background image cover with perfect ratio and play video when hover on parent div

fullwidth-video-background.html

<!-- Video Hover Play Scripts -->
<script>
    $( document ).ready(function() {
        var figure = $(".video").hover( hoverVideo, hideVideo );

        function hoverVideo(e) {  
            $('video', this).get(0).play(); 
        }

        function hideVideo(e) {
            $('video', this).get(0).pause(); 
        }
    });
</script>
<!-- Video Hover Play Scripts -->

<!-- Half width section with top text -->
<div class="sinlge_filmsbox filmsposter-1 video">
    <a class="view_more" href="#" title="View More" data-featherlight="#sinlge_filmsbox_slide1">
        <div class="film_video_clip">
            <video class="slider_video" width="560" height="315" loop preload="none" muted>
                <source src="video/Slides/Sardari-Enigma-Slide2.mp4" type="video/mp4" />
                <source src="video/Slides/Sardari-Enigma-Slide2.mp4" type="video/mov" />
                <source src="video/Slides/Sardari-Enigma-Slide2.mp4" type="video/ogg" /> Your browser does not support the video tag.
            </video>
        </div>

        <div class="overlay_top">
            <div class="overlay_content">
                <div class="text_boxes">
                    <h3>Sardari’s Enigma</h3>
                    <p>Mystery of an unknown Iranian Consul, Abdol Hossein Sardari, who risks his life to save many lives during the WWII in France…</p>
                    <h4>Documentary, 95 min </h4>
                </div>

                <div class="view_more_btn">
                    <p class="view_more">View<br />More <span class="view_more_icon">+</span></p>
                </div>
            </div>
        </div>
    </a>
</div>


<script>
    var $video  = $('video'),
    $window = $(window); 

    $(window).resize(function(){

        var height = $window.height();
        $video.css('height', height);

        var videoWidth = $video.width(),
        windowWidth = $window.width(),
        marginLeftAdjust =   (windowWidth - videoWidth) / 2;

        $video.css({
        'height': height, 
        'marginLeft' : marginLeftAdjust
        });
    }).resize();
</script>

style.css

.overlay_top {
  background: rgba(15, 15, 20, 0.5) none repeat scroll 0 0;
  height: 100%;
  padding: 50px 75px;
  position: absolute;
  width: 100%;
  z-index: 1;
    transition: 1s;
}
#films .sinlge_filmsbox:hover .overlay_top {
  background: rgba(15, 15, 20, 0.15) none repeat scroll 0 0;
    transition: 1s;
}
.film_video_clip {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
    opacity: 0;
    transition: 1s;
}
.sinlge_filmsbox:hover .film_video_clip {
    opacity: 1; transition: 1s;
}
.sinlge_filmsbox:hover .overlay_top:before {
    /*background: #000 none repeat scroll 0 0;*/
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    opacity: 0; transition: 1s
}
.overlay_top:before {
    background: #000 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.sinlge_filmsbox:hover a.view_more::before {
    opacity: 0; transition: 1s
}



a.view_more, a.popup-gallery {
    display: block;
    height: 100%;
    /* padding: 20px;*/
    position: relative;
    width: 100%;
}
a.view_more::before, a.popup-gallery:before {
    /* background: #000 none repeat scroll 0 0;*/
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
}



.sinlge_filmsbox.no_more_films.getintouch:hover {padding: 0;}
.sinlge_filmsbox.no_more_films.getintouch:hover .overlay_top:before {opacity: 0}
.sinlge_filmsbox.no_more_films.getintouch:before {display: none}
/* Branding Text */
.sinlge_filmsbox::before {
    bottom: 2px;
    color: #fff;
    content: "©zardinfilm.com";
    font-size: 10px;
    font-weight: 700;
    opacity: 0.75;
    position: absolute;
    right: 15px;
    text-align: right;
    width: 130px;
}
.about_left::after {
  bottom: 3px;
  color: #fff;
  content: "©zardinfilm.com";
  font-weight: 700;
  position: absolute;
  right: 15px;
    opacity: .75;
    font-size: 10px;
}
.popup_play_films::after {
    bottom: 4px;
    color: #fff;
    content: "©zardinfilm.com";
    font-size: 10px;
    font-weight: 700;
    left: auto;
    opacity: 0.75;
    position: absolute;
    right: 15px;
}
.overlay_content {
    height: 100%;
    position: relative;
    width: 100%;
}
.text_boxes {
    bottom: 0;
    padding-right: 100px;
    position: absolute;
    width: 100%;
}
.overlay_content .view_more_btn {
    bottom: 18px;
    right: 0;
    display: none
}
.sinlge_filmsbox:hover .overlay_content .view_more_btn {
    display: block
}
.text_boxes h3,
.sinlge_filmsbox.no_more_films .overlay_top .overlay_content .text_boxes h2 {
    color: #fff;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 1.51px;
    margin-bottom: 15px;
    text-transform: uppercase;
}
.text_boxes p {
    color: #acacbb;
    font-size: 11px;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.5px;
    line-height: 20px;
    margin-bottom: 15px;
}
.text_boxes h4 {
    color: #fefeff;
    font-size: 9px;
    letter-spacing: 2.4px;
    margin: 0;
    text-transform: uppercase;
}