Leave Iframe Responsive without involving it in any element

2

Galera is as follows, I need to leave an iframe responsive.  But to complicate it I can not make 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 make this responsive, with no elements to wrap around the iframe. I do not know if this is possible, but if it was it would be of great help if you can help me with that.

    
asked by anonymous 03.03.2017 / 22:46

1 answer

0

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

.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>

Ifyoulimitfrom.contentthewidthwilllooklikethis:

.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>
    
03.03.2017 / 23:11