2

Galera é o seguinte, estou precisando deixar um iframe responsivo. Só que para complicar não tenho como fazer deixar esse iframe envolto em outro elemento. Ex:

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

Preciso deixar isso responsivo, sem elementos para envolver o iframe. Nem sei se isso é possível, mas se for seria de grande ajuda, se você puder me ajudar com isso.

1 Resposta 1

2

Tecnicamente responsivo é controlado pelos media-queries, com variações dependendo da situação, mas no seu caso um width: 100%; deve resolver:

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

Se você limitar do .content a largura irá ficar assim:

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

1
  • Obrigado, isso ajuda.
    – YodaCode
    5/03/2017 às 1:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .