I have a gallery for youtube videos for which this is the css:
#content #gallery {
width: 100%;
list-style: none;
overflow: hidden;
}
#content #gallery li {
width: 24.89331436699858%;
margin: 0 12.66002844950213% 1.5em 0;
position: relative;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
}
#content #gallery li:nth-child(3n+3) {
margin: 0 0 1.5rem;
}
#content #gallery a {
outline: none;
}
#content #gallery img {
max-width: 100%;
height: auto
}
What i miss in this css though is a some sort of play button. I have a small icon for that but I have no idea how to center that both vertical and horizontal on top of the thumbnail without having to use px with position absolute because I would like that icon to be responsive both in size and position
I hope this makes any sense?
Thank you in advance