web-dev-qa-db-fra.com

Comment implémenter une iframe intégrant Youtube réactif avec Twitter Bootstrap?

Actuellement, j'intègre des vidéos Youtube avec le code HAML suivant dans un site basé sur Twitter Bootstrap:

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

Malheureusement, cela ne répond pas bien lors du redimensionnement du navigateur ou des appareils mobiles en raison de la hauteur statique.

Quel serait un meilleur moyen (plus dynamique et plus réactif) de mettre en œuvre cet iframe intégré pour Youtube?

ruby-on-rails-3twitter-bootstrapyoutube-apiresponsive-design
29
pglombardo

Essayez cette "vidéo CSS réactive", cela 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>
78
Bart Naus

J'ai implémenté une solution CSS pure qui fonctionne très bien.

Voici un exemple de code qui, à mon avis, utilise le code iframe généré sur 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 une autre vue où, au lieu d'utiliser iframe, j'ai utilisé le champ body généré à partir de la gem AutoHtml, qui est utilisé pour intégrer différents types de liens vidéo dans une page Web. Cela est utile si vous avez un modèle dans lequel un lien doit être incorporé de manière dynamique 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 donne un ou deux billets de blog à consulter.

http://www.youtube.com/watch?v=PL_R3zEjqEc

11
Pamela Cook - LightBe Corp

Bootstrap 3.2.0 apporte plusieurs améliorations et un grand nombre de corrections de bugs. Un cadre pour la construction de sites Web avec un design réactif, Bootstrap manquait de support pour responsive, et des éléments, fonctionnalité ajoutée dans cette dernière version.

Le code HTML d'une vidéo YouTube 16: 9 réactive qui ajuste sa taille en fonction de la largeur de la page dans laquelle il est affiché se présente comme suit:

 Sur votre conteneur (peut-être DIV), ajoutez class = "embed-responsive embed-responsive-16by9"
3
Iso Samuel

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

1
neon

Juste pour automatiser la réponse de @Bart , j'ai créé un simple snippé Javascript qui enveloppe automatiquement les éléments iframe dans <div class="flex-video">

$(document).ready(function() {
  $('iframe').each(function() {
    $(this).wrap('<div class="flex-video"></div>');
  });
});
1
Caumons

Si vous utilisez bootstrap, la méthode ci-dessous est sans aucun doute le moyen le plus simple d'implémenter une intégration responsive:

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

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

1
B Cronyn