How would I be able to set this up so that margin is only used once on the videos and not the covers?
How would I be able to keep the covers centered inside
width: 424px;
height: 238px;
So that, if the margins are changed to the videos, the covers will always remain centered inside that space?
Is this something that can be done, or is it not possible?
Covers
These margins would go away.
.container-left-video .jacket-left {
position: relative;
width: 80px;
height: 80px;
margin-left: 196px;
}
.container-right-video .jacket-right {
position: relative;
width: 80px;
height: 80px;
margin-right: 196px;
background-position: 0 -80px;
background-size: 100% 200%;
}
Videos
These margins would stay.
.container-left-video .wrap-left {
position: relative;
width: 424px;
height: 238px;
margin-left: 25px;
cursor: pointer;
overflow: hidden;
border-radius: 25px;
}
.container-right-video .wrap-right {
position: relative;
width: 424px;
height: 238px;
margin-right: 25px;
cursor: pointer;
overflow: hidden;
border-radius: 25px;
}