Responsive issue

Question

I have a video background with js responsive plugin, but it doesn't work good, i mean there is a black space between

Heres how it looks like

https://www.dropbox.com/s/1xdyx7p5u7z67fz/Zrzut%20ekranu%202014-03-20%2023.00.25.png

The site

http://xypnise.com/test/

JS

    $(document).ready(function(){
        var video = $("#fs-video");
        var windowObj = $(window);

        function onResizeWindow() {
            resizeVideo(video[0]);
        }

        function onLoadMetaData(e) {
            resizeVideo(e.target);
        }

        function resizeVideo(videoObject) {

            var videoHeight = videoObject.videoHeight * percentWidth / 100;
            video.height(videoHeight);
        }

        video.on("loadedmetadata", onLoadMetaData);
        windowObj.resize(onResizeWindow);
    }
);

CSS

    #fs-video {
    width: 100%;
    position: fixed; 
    overflow: hidden;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

HTML

  <div class="cover-video" style="width: 1905px; height: 923px;" >
<video id='fs-video' preload='metadata'  autoplay='true' loop="true" >
    <source src="http://www.xypnise.com/test/clouds_xypnise.mp4" type="video/mp4">
</video>

Can anyone help me ?

Answer 1

$(document).ready(function() {
    var aspectRatio = 404/720;
    aspectRatio = aspectRatio.toFixed(3);
    $('#content').css('height', $('body').width() *aspectRatio);
    $(window).resize(function() {
        $('#content').css('height', $('body').width()*aspectRatio);
    });
});

Answer 2

If you wanted to look at a pure css way to do this, check out this technique.

Just apply a wrapper <div class="videoWrapper/> around your video and add the following CSS:

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Answer 3

 $(document).ready(function(){
   var aspectRatio=404/720
   document.getElementById('content').style.height=(window.innerWidth*aspectRatio)+'px' 
   document.addEventListener('resize',function() {
     document.getElementById('content').style.height=(window.innerWidth*aspectRatio)+'px'  
   })
 })