Comment mettre en œuvre un réactif Youtube iframe avec Twitter Bootstrap?

Actuellement, je suis intégration de vidéos Youtube à la suite de HAML code dans un Twitter Bootstrap de site:

.row
  .span12
    %iframe.span11{ :height => "720", :frameborder => "0", :allowfullscreen => nil, :src => v.video_url }

Malheureusement, ce n'est pas bien réagi lors du redimensionnement du navigateur ou sur des appareils mobiles en raison de la hauteur statique.

Ce qui serait une mieux (plus dynamique et réactive) pour implémenter cette embedded iframe pour Youtube?

InformationsquelleAutor pglombardo | 2012-08-28

78

Essayer ce "Responsive vidéo CSS", il fonctionne parfaitement pour moi: https://gist.github.com/2302238
```
<section class="row">
  <div class="span6">
    <div class="flex-video widescreen"><iframe src="https://www.youtube-nocookie.com/embed/..." frameborder="0" allowfullscreen=""></iframe></div>
  </div>
  <div class="span6">
    ...
  </div>
</section>
```
- Merci Bart! Fonctionne comme un charme dans un réactif blog WP.
- Pour ce script ne fonctionne pas, mais ce plugin jQuery qui fait le travail pour moi: github.com/marclarr/FitVids.js
- L'homme, cela a très bien fonctionné. J'aimerais voir ce construit sur bootstrap en tant que par défaut.
- J'ai ajouté une réponse qui fournit un simple bout de code Javascript qui ajoute automatiquement le code indiqué par @Bart. Voir stackoverflow.com/a/20585329/955619
InformationsquelleAutor Bart Naus
11

J'ai mis en place un pur CSS solution qui fonctionne très bien.

Voici un exemple de code de mon point de vue à l'aide de l'iframe code généré dans YouTube.
```
<div class="video-container">
  <iframe width="300" height="168" src="http://www.youtube.com/embed/MY__5O1i2a0" frameborder="0" allowfullscreen></iframe>
</div>
```
Voici un exemple de code dans un autre point de vue où, au lieu de l'utilisation d'iframe, j'ai utilisé le corps de champ générées à partir de la AutoHtml gem, qui est utilisé pour l'incorporation de différents types de liens vidéo dans une page web. C'est bien si vous avez un modèle où un lien doit être dynamiquement embarqués dans la même page web.
```
<div class="video-container">         
  <span style="text-align: center;"><%= @livevideo.body_html %></span>
</div>
```
Voici le code CSS:
```
.video-container { 
   position: relative; /* keeps the aspect ratio */ 
   padding-bottom: 56.25%; /* fine tunes the video positioning */ 
   padding-top: 60px; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
```
Voici la vidéo YouTube qui explique en détail le fonctionnement du code et de donner un ou deux billets de blog à consulter.

http://www.youtube.com/watch?v=PL_R3zEjqEc
- Tandis que ceci peut théoriquement répondre à la question, il serait préférable pour inclure l'essentiel des éléments de réponse ici, et de fournir le lien de référence.
InformationsquelleAutor Pamela Cook - LightBe Corp
3

Bootstrap 3.2.0 est livré avec plusieurs améliorations et un grand nombre de corrections de bogues. Un cadre pour la construction de sites web avec une conception responsive, Bootstrap manquait de soutien pour les sensibles , et les éléments sont ajoutés dans cette dernière version.

Le code HTML d'un réactif de YouTube vidéo 16:9, qui ajuste sa taille en fonction de la largeur de la page, il est affiché dans ressemble à ceci:
```
Sur votre récipient(peut-être DIV) ajouter class="blogger-sensibles incorporez-responsive-16by9" 
```
InformationsquelleAutor Iso Samuel
1

C'est probablement mieux de le faire avec jQuery: http://www.seanmccambridge.com/tubular/ ou http://okfoc.us/okvideo/

InformationsquelleAutor neon
1

Juste pour automatiser @Bart répondre, j'ai créé un simple Javascript ciselée qui adapte automatiquement le iframe éléments au sein de <div class="flex-video">
```
$(document).ready(function() {
  $('iframe').each(function() {
    $(this).wrap('<div class="flex-video"></div>');
  });
}); 
```
InformationsquelleAutor Caumons

Si en utilisant bootstrap, la méthode ci-dessous est sans doute la façon la plus simple à mettre en œuvre un réactif intégrer:

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

Documentation peut être trouvée ici: http://getbootstrap.com/components/#responsive-embed.

InformationsquelleAutor B Cronyn

Vous devez vous connecter pour publier un commentaire.