How can i avoid black bar in iframe videos? - iframe

Question

Here is the code for iframe video:
<div>
<iframe src="https://player.vimeo.com/video/135943631?autoplay=0&color=c9ff23&
title=0&byline=0&portrait=0" width="1000" height="1000" frameborder="0"
webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
Now it shows like this.
May i know how to avoid this black bar below and above the video.
I tried using following code:
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 20px;
height: 0;
background-color:#fff;
}
html:
<div class="videoWrapper">
<iframe src="https://player.vimeo.com/video/135943631?autoplay=0&
color=c9ff23&title=0&byline=0&portrait=0" width="800px" height="450px"
frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
Note: I should not change height. Because i need big size video.
Can Any one suggest me, how can i achieve this?

Answer 1

The black bars are appearing because your video is in aspect ratio of 16:9 and you are trying to fit with inside iframe of 1000px/1000px.
So your height is scaled according to aspect ratio, i.e., video height is 1000 * 9/16 = ~584px and remaining 420px are empty. Since vimeo has the video background as black color, this empty space is appearing as black bars.
To fix your problem, its better to have iframe with width/height in 16:9 ratio. (example: width: 800px; height: 450px)