Dans BootStrap, il arrive que la vidéo qu’on insère s’affiche parfaitement sur mobile et qu’elle apparaisse trop petite sur un ordinateur (ou l’inverse). Heureusement il existe une astuce toute simple pour résoudre ce problème proportion.
En effet, les templates responsive permettent d’adapter un site à l’écran du visiteur en utilisant des formes fluides. Quand on ajoute une iframe, cette dernière a en général une taille fixe, du coup, quand on change d’écran, la taille de l’iframe ne bouge pas.
On se retrouve ainsi avec une vidéo qui selon les cas, déborde de l’écran du mobile ou est trop petite sur un écran d’ordinateur.
Pour résoudre ce problème, rien de plus simple.
Avec BootStrap, il suffit d’insérer son code iframe à l’intérieur d’un div avec une class spécifique qui se chargera de redimensionner l’iframe à l’écran en conservant son ratio.
Ainsi au lieu d’utiliser le code iframe tel quel, fourni par Youtube :
On utilisera le code suivant
Un dernier point : si vous souhaite adopter un aspect 4:3 au lieu de 16:9, remplacez 16by9 par 4by3 comme suit :
embed-responsive-16by9 par embed-responsive-4by3
J’espère que ça vous aidera, n’hésitez pas à partager !