Hogy tudom ezt kijavítani css-ben?

Egy videót szeretnék belinkelni Bootstrap-pel. A gond az, hogy a video alatt túl nagy a padding.

HTML:

<div class="embed-responsive embed-responsive-16by9">

<iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe>

</div>

Bootstrap css idevágó része:

.embed-responsive {

position: relative;

margin: 0;

display: block;

height: 0;

padding: 0;

overflow: hidden;

}

.embed-responsive .embed-responsive-item,

.embed-responsive iframe,

.embed-responsive embed,

.embed-responsive object,

.embed-responsive video {

position: absolute;

transform: translateX(-50%);

width: 40%;

height: 40%;

border: 0;

}

.embed-responsive-16by9 {

padding-bottom: 56.25%;

}

Próbáltam a padding-bottom-ot állítgatni, de akkor eltűnik a videó, vagy csökken a magassága.

Hogy lehet ezt megoldani?