Leave iframe responsive, without wrapping it in any element

Question

Leave iframe responsive, without wrapping it in any element

Galley is as follows, I'm needing to leave a responsive iframe. Only to complicate I have no way to leave this iframe wrapped in another element. Ex:

  <div class="content">
    <h1>Meu Titulo</h1>
    <p>Meu artigo</p>
      <iframe src="http://youtube.com/embed/bla"></iframe>
    </div>

I need to leave this responsive, with no elements to engage the iframe. I don't even know if this is possible, but if it is it would be of great help if you can help me with it.

2

iframe responsivo

Author: Aprendiz, 2017-03-03

Source

1 answers

score 1 · Answer 1

Technically responsive is controlled by media-queries , with variations depending on the situation, but in your case a width: 100%; must solve:

.content iframe {
    width: 100%;
    border: none;
}

<div class="content">
<h1>Meu Titulo</h1>
<p>Meu artigo</p>
<iframe src="http://youtube.com/embed/bla"></iframe>
</div>

If you limit from .content the width will look like this:

.content {
    width: 300px;
}

.content iframe {
    width: 100%;
    border: none;
}

<div class="content">
<h1>Meu Titulo</h1>
<p>Meu artigo</p>
<iframe src="http://youtube.com/embed/bla"></iframe>
</div>