Iframe responsivo usando Bootstrap

100

Estou usando o Bootstrap.

Tenho um texto que contém 2 ou 3 vídeos incorporados baseados em iframes.

Esses dados são obtidos do banco de dados.

Como posso tornar esses iframes responsivos?

Código de exemplo:

<div class="row">

   <div class="col-lg-12 col-md-12 col-sm-12">

     SOME TEXT SOME TEXT SOME TEXT SOME TEXT
     SOME TEXT SOME TEXT SOME TEXT SOME TEXT

     <iframe src="http://youtube.com/...."></iframe>

     SOME TEXT SOME TEXT SOME TEXT SOME TEXT
     SOME TEXT SOME TEXT SOME TEXT SOME TEXT

     <iframe src="http://youtube.com/...."></iframe>


     SOME TEXT SOME TEXT SOME TEXT SOME TEXT
     SOME TEXT SOME TEXT SOME TEXT SOME TEXT

     <iframe src="http://youtube.com/...."></iframe> 

   </div>

</div>

Este é um dado dinâmico. Como posso torná-lo responsivo?

twitter-bootstrap iframe New Co
fonte
possível duplicata de Tornar um iframe responsivo
mpgn de
1
É bom observar qual versão do Bootstrap. Eu respondi isso com duas opções.
Christina

Respostas:

215

Opção 1

Com o Bootstrap 3.2, você pode envolver cada iframe no wrapper responsivo incorporado de sua escolha:

http://getbootstrap.com/components/#responsive-embed

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

opção 2

Se você não quiser embrulhar seus iframes, você pode usar FluidVids https://github.com/toddmotto/fluidvids . Veja a demonstração aqui: http://toddmotto.com/labs/fluidvids/

   <!-- fluidvids.js -->
    <script src="js/fluidvids.js"></script>
    <script>
    fluidvids.init({
      selector: ['iframe'],
      players: ['www.youtube.com', 'player.vimeo.com']
    });
    </script>
Christina
fonte
2
incapaz de diminuir a altura de iframe. I mudou 100%da 80%classe .embed-responsive iframe. Mas está dando espaço vazio. depois do vídeo. Como evitar esse espaço.
SatyaTNV
FINALMENTE, isso funciona perfeitamente! Pode ser bom incluir o obrigatório <p>Your browser does not appear to support iframes</p>entre as iframetags, mas estou me perguntando se isso é relevante nos dias de hoje ... obrigado novamente, muitas soluções (hacky) estavam perto, mas isso é perfeito!
svenevs
1
para a Opção 1: o url dos documentos mudou para getbootstrap.com/docs/3.3/components/#responsive-embed
Alexander Schmidt
use uma proporção de aspecto e inclua-a para fazê-lo funcionar - >> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <link rel = "stylesheet" href = " maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css "> <script src = " maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/… > e dentro da tag iframe -> frameborder = "0" style = "overflow: hidden; overflow-x: oculto; overflow-y: oculto; altura: 100%; largura: 100%; posição: absoluta; topo: 0px; esquerda: 0px; direita: 0px; inferior: 0px; "altura =" 100% "largura =" 100% "
krishna
24

Por favor, olha só, espero que ajude

<div class="row">
 <iframe class="col-lg-12 col-md-12 col-sm-12" src="http://www.w3schools.com">
 </iframe>
</div>
Mohamed
fonte
Obrigado! Ugh, finalmente algo simples que realmente funciona.
Fatimaezzahra Rarhibou
13

A melhor solução que funcionou bem para mim é a que encontrei no link abaixo: https://bootstrapmaster.com/implement-responsive-youtube-vimeo-embed-iframe-twitter-bootstrap-3/

Você deve: Copiar este código para o seu arquivo CSS principal,

.responsive-video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 60px; overflow: hidden;
}

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

e, em seguida, coloque seu vídeo incorporado em

<div class="responsive-video">
    <iframe ></iframe>
</div>

É isso aí! Agora você pode usar vídeos responsivos em seu site.

explosão solar
fonte
1
padding-bottom: 56.25%;fazer algumas coisas estranhas
Emidomenge
9

Portanto, o youtube fornece a tag iframe da seguinte maneira: 

<iframe width="560" height="315" src="https://www.youtube.com/embed/2EIeUlvHAiM" frameborder="0" allowfullscreen></iframe>

No meu caso, apenas alterei para largura = "100%" e deixei o resto como está. Não é a solução mais elegante (afinal, em dispositivos diferentes você obterá proporções estranhas), mas o vídeo em si não se deforma, apenas o quadro.

Julián
fonte
É responsivo dessa forma? Se for, ele manterá a proporção?
Csaba Toth
Bom e simples. Funcionou para mim! Obrigado!
Joe
Funciona para mim também. Mantendo a altura sugerida (no seu caso 315), mas altere a largura para "100%". Escala responsivamente e funciona bem com as classes de coluna de bootstrap.
BAERUS
4

Opção 3

Para atualizar o iframe atual

$("iframe").wrap('<div class="embed-responsive embed-responsive-16by9"/>');
$("iframe").addClass('embed-responsive-item');
Ratha Hin
fonte
0

Trabalhando em agosto de 2020

usa isto

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

use uma proporção de aspecto

<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

nas opções de uso do iframe

 <iframe class="embed-responsive-item" src="..."
  frameborder="0"
    style="
      overflow: hidden;
      overflow-x: hidden;
      overflow-y: hidden;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
    "
    height="100%"
    width="100%"
  ></iframe>
Krishna
fonte