Leave Iframe Responsive, without involving it in any element

Asked

Viewed 1,224 times

2

Guys, here’s the thing, I need to make an iframe responsive. Only to complicate matters, I have no way of getting 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 involve the iframe. I don’t even know if that’s possible, but if it is, it would be really helpful, if you could help me with that,.

iframe responsive

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 the .content the width will stay 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>

  • Thank you, that helps.

Browser other questions tagged iframe responsive

You are not signed in. Login or sign up in order to post.