Best way to setup video/image behind it, both don't move against each other but move and scale responsively together.

Hi guys, so I've been trying to recreate a little photoshop sketch I made:

http://www.ultraimg.com/image/5LAX

Now what's really killing me is the video and image staying perfectly together even with browser re-sizing. I would like to scale the video and the image behind it together in my sass media query mixin so controlling it would be a nice and easy like:

.img-video-container  {
  @include breakpoint(hires) {  margin-right: 15%; }
  @include breakpoint(desktop) {  margin-right: 12%; }
  @include breakpoint(laptop) {  margin-right: 10%; }
}

(also anyone know an efficient way to re-size the video and image collectively in a similar way?)

Anyways, I've tried it with different approaches like absolute positioning or Pseudo-Elements ::after / ::before and they will be perfectly aligned. But at one point or another the video will move just a little bit so it's no longer in the image of the monitor.

Anyone know a good way to glue these things together for good, so no matter what they don't move a pixel away from each other while keeping the entire thing movable and scalable like the sass mixin I mentioned?

(my next idea way to try to use a pretty cool absolute flexible grid, but I don't know if that will really fix the issue: http://codepen.io/jxnblk/pen/dGLtj )

... Or am I dreaming and I should just have a bunch of media queries with different absolute positions for everything and have a bunch of different specified width and heights for when the browser scales?