Comment mettre en œuvre une iframe Youtube responsive avec Bootstrap Twitter?
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 sur les appareils mobiles en raison de la hauteur statique.
quelle serait une meilleure façon (plus dynamique et réactive) de mettre en œuvre cette iframe intégrée pour Youtube?
6 réponses
Essayez 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>
j'ai implémenté une solution CSS pure qui fonctionne très bien.
voici un exemple de code dans ma vue en utilisant 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 du gem AutoHtml, qui est utilisé pour intégrer 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 dynamique intégré dans le même web page.
<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 comment le code fonctionne et donner un ou deux billets de blog à vérifier.
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 un design responsive, Bootstrap manquait le soutien pour responsive, et les éléments, fonctionnalité ajoutée 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:
On your container(maybe DIV) add class="embed-responsive embed-responsive-16by9"
C'est probablement mieux de le faire avec jQuery: http://www.seanmccambridge.com/tubular/ ou http://okfoc.us/okvideo/
Juste pour automatiser la réponse de @ Bart, j'ai créé un Javascript simple qui s'enroule automatiquement iframe éléments <div class="flex-video">
$(document).ready(function() {
$('iframe').each(function() {
$(this).wrap('<div class="flex-video"></div>');
});
});
si vous utilisez bootstrap, la méthode ci-dessous est sans aucun doute la plus simple pour implémenter un embed 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>
Documentation peut être trouvée ici: http://getbootstrap.com/components/#responsive-embed.