Responsive fullscreen youtube video with no black bars?

Question

I have a fullscreen youtube video embedded on my website.

It looks goo

Answer 1

You can also use this below:-

<iframe class="" style="background:url(ImageName.jpg) center; background-size: 100% 140%; " allowfullscreen="" width="300" height="200"></iframe>

Answer 2

I'm posting this because the answers above are for when you have the black bars at the top and at the bottom. What if you have the bars on the sides (left and right). This script will take care of the two scenario.

    var vidRatio = vidWidth/vidHeight;
var wrapperHeight = $('#videoIFrameContainer').height();
var wrapperWidth = $('#videoIFrameContainer').width();
var wrapperRatio = wrapperWidth / wrapperHeight;
if(wrapperRatio < vidRatio){
    var newWidth  = wrapperWidth  * (vidRatio/wrapperRatio);
    $('#videoIFrame').css({'min-height':wrapperHeight+'px', 'min-width':newWidth+'px', 'position':'absolute', 'left':'50%','margin-left':'-'+(newWidth/2)+'px'});

}
else{
    var newHeight  = wrapperHeight   * (wrapperRatio / vidRatio);
    $('#videoIFrame').css({'min-height':newHeight+'px', 'min-width':wrapperWidth+'px', 'position':'absolute', 'top':'50%','margin-top':'-'+(newHeight/2)+'px'});

}