I am developing a responsive web page using bootstrap framework, and I want to put a responsive iframe. 

The bootstrap docs says that I can put a responsive 16x9 aspect ratio iframe using

```
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

```

and the css (included in the bootstrap.css) is

```
.embed-responsive
{
display: block;
height: 0;
overflow: hidden;
position: relative;
}

.embed-responsive.embed-responsive-16by9
{
padding-bottom: 56.25%
}

.embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object
{
border: 0 none;
bottom: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

```

The result is that the container of the iframe (the div with class "embed-responsive...") is responsive. This takes the correct width and height according to the resolution. But the iframe is overflowed, because it is not resized.

How can I do to resize the iframe to exactly fill the div?