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.