J'utilise Bootstrap.
J'ai un texte qui contient 2 ou 3 iframes incorporer des vidéos.
Ces données sont extraites de la base de données.
Comment puis-je rendre ces iframes réactifs?
Exemple de code:
<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>
Ceci est une donnée dynamique. Comment puis-je le rendre réactif?
Avec Bootstrap 3.2, vous pouvez envelopper chaque iframe dans l'encapsuleur responsive-embed de votre choix:
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>
Si vous ne souhaitez pas encapsuler vos iframes, vous pouvez utiliser FluidVids https://github.com/toddmotto/fluidvids . Voir la démo ici: 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>
S'il vous plaît, regardez ceci, j'espère que c'est de l'aide
<div class="row">
<iframe class="col-lg-12 col-md-12 col-sm-12" src="http://www.w3schools.com">
</iframe>
</div>
La meilleure solution qui a très bien fonctionné pour moi est celle que j'ai trouvée dans le lien ci-dessous: https://bootstrapmaster.com/implement-responsive-youtube-vimeo-embed-iframe-Twitter-bootstrap-3/ =
Vous devez: copier ce code dans votre fichier 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%;
}
puis mettez votre vidéo intégrée à
<div class="responsive-video">
<iframe ></iframe>
</div>
C'est ça! Vous pouvez maintenant utiliser des vidéos responsive sur votre site.
Donc, youtube donne la balise iframe comme suit:
<iframe width="560" height="315" src="https://www.youtube.com/embed/2EIeUlvHAiM" frameborder="0" allowfullscreen></iframe>
Dans mon cas, je viens de le changer en width = "100%" et de laisser le reste tel quel. Ce n'est pas la solution la plus élégante (après tout, sur différents appareils, vous obtiendrez des rapports bizarres) Mais la vidéo elle-même ne se déforme pas, mais uniquement le cadre.
Option
Pour mettre à jour l'iframe actuel
$("iframe").wrap('<div class="embed-responsive embed-responsive-16by9"/>');
$("iframe").addClass('embed-responsive-item');