Getting margin to be used only once

HTML-CSS
1

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?

https://jsfiddle.net/sjkux183/

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;
}