Iframe de resposta usando Bootstrap

Question

Iframe de resposta usando Bootstrap

estou a usar 'Bootstrap'.

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

estes dados são obtidos a partir da base de dados.

Como posso fazer estas iframes responderem?

Código Do 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>

Isto é um dado dinâmico. Como posso fazê-lo reagir?

90

twitter-bootstrap iframe

Author: Christina, 2014-08-10

Source

5 answers

score 200 · Answer 1

Opção 1

Com o Bootstrap 3. 2 pode embrulhar cada iframe na embalagem de embutimento sensível da 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 não quiser embrulhar as suas iframes, pode usar os 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>

score 17 · Answer 2

Por favor, vê isto, espero que seja ajuda.

<div class="row">
 <iframe class="col-lg-12 col-md-12 col-sm-12" src="http://www.w3schools.com">
 </iframe>
</div>

score 12 · Answer 3

A melhor solução que funcionou bem para mim foi a que encontrei no link abaixo.: https://bootstrapmaster.com/implement-responsive-youtube-vimeo-embed-iframe-twitter-bootstrap-3/ Tens de o fazer.: Copie este código para o seu ficheiro 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 depois coloque o seu vídeo em relevo

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

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

score 8 · Answer 4

Assim, o youtube dá a etiqueta iframe da seguinte forma:

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

No meu caso, mudei - o para largura = "100%" e deixei o resto como está. Não é a solução mais elegante (afinal de contas, em diferentes dispositivos você vai ter relações estranhas), mas o vídeo em si não fica deformado, apenas a moldura.

score 5 · Answer 5

Opção 3

Para actualizar a iframe actual

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