Bonsoir,
Je suis acutellement en train de coder le portfolio d'un ami, jusqu'à maintenant tout va bien, cependant, un petit détail me pose problème.
Les images et vidéos d'un même projet sont affichées sur une même row, à l'aide d'un scroll-x, comme vous pouvez le voir sur l'image qui suit.
Chaque image / vidéo prend 20% de la div qui les englobe, je n'ai aucun soucis avec les images, cependant je rencontre un problème avec la vidéo qui ne veut pas prendre les mêmes proportions que les images.
Voici le code l'ajustement d'une image :
.wrapper-scroll {
padding-left : 50px;
width : 80%;
overflow-x : scroll;
}
.descri-projet {
width : 5000px;
}
.descri-projet img {
width : 20%;
display : inline-block;
}
Je tente de faire la même chose avec une vidéo :
.descri-projet iframe {
width : 20%;
height : auto;
display : inline-block;
}
Le HTML permettant l'affichage de ces éléments :
<div class='wrapper-scroll'>
<div class='descri-projet'>
<iframe src="https://www.youtube.com/embed/jG01a41WHzk" frameborder="0" allowfullscreen></iframe>
<img src='images/cuir.png' alt='cuir'>
<img src='images/cuir.png' alt='cuir'>
<img src='images/cuir.png' alt='cuir'>
</div>
</div>
Cependant rien n'y fait.
Et voilà donc le rendu que j'obtiens :
Si vous avez une idée... en vous remerciant d'avance!
Youtaka