

L’intégration d’une vidéo Youtube ou Vimeo via iframe peut vous poser problème sur votre site en Responsive Design.
Initialement les vidéo Youtube et Vimeo ne s’adapte pas à toutes les devices.
Pour remédier à ce problème et afin que votre vidéo s’adapte automatiquement à la résolution de votre écran, il suffit d’ajouter les quelques lignes CSS et HTML.
Vidéos Responsive via Iframe
Intégration HTML :
Ajout de la <div class=“video-container“> sur votre iframe
[pastacode lang=”markup” message=”HTML” highlight=”” provider=”manual”]<div class="video-container">
<iframe src="https://www.youtube.com/embed/yRWY9UogMJA" frameborder="0" width="560" height="315"></iframe>
</div>
[/pastacode]
Intégration CSS :
Ajout de ces lignes de code CSS dans votre feuille de style
[pastacode lang=”css” message=”Feuille de style” highlight=”” provider=”manual”]
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
[/pastacode]
Comment créer une vidéo Responsive avec largeur fixe
Pour limiter et fixer la largeur de la vidéo, il suffit de rajouter une autre <div > et spécifiez une valeur de largeur fixe avec max-width : 100 %
Intégration HTML :
Ajout d’une <div class=“video-wrapper“> supplémentaire autour de votre iframe
[pastacode lang=”markup” message=”HTML” highlight=”” provider=”manual”]<div class="video-wrapper">
<div class="video-container">
<iframe src="https://www.youtube.com/embed/yRWY9UogMJA" width="800" height="450" frameborder="0"></iframe>
</div>
<!-- /video -->
</div>
<!-- /video-wrapper -->
[/pastacode]
Intégration CSS :
Ajout d’une nouvelle classe CSS dans votre feuille de style
[pastacode lang=”css” message=”Feuille de style” highlight=”” provider=”manual”]
.video-wrapper {
width: 600px;
max-width: 100%;
}
[/pastacode]
Exemple :
[ABs_youtube id=”https://www.youtube.com/watch?v=yRWY9UogMJA” fullscreen_button=”1″ modestbranding=”1″ controls=”1″]
Compatibilité :
Cette astuce fonctionne sur les navigateurs suivants : Chrome, Safari, Firefox, Internet Explorer, Opera, iPhone et iPad.
Crédits :
Cette astuce a été trouvée sur tjkdesign.com.