Angular 2/4/5: как переместить элемент в другой элемент

Question

В моем проекте Angular я играю с CSS, чтобы переместить элемент изображения / видео в элемент «stage».

Что у меня так далеко:

SCSS:

.stage {
  width: 400px;
  height: 300px;
  position: relative;
  overflow: hidden;
  background-color: coral
}

video {
  position: absolute;
  width: 500px;
  height: 400px;
}

HTML:

<div class="stage">
  <video controls autoplay [ngStyle]="{'top': top, 'left': left">
    <source src="http://www.archive.org/download/AnimatedMechanicalArtPiecesAtMit/P1120973_512kb.mp4" type="video/mp4">
  </video>
</div>

<div class="row">
  <div class="col-1 ">
    <button type="button" class="btn btn-primary btn-tn " (click)="moveLeft()">
      Left
    </button>
  </div>
  <div class="col-1">
    <button type="button" class="btn btn-primary btn-tn " (click)="moveRight()">
      Right
    </button>
  </div>
  <div class="col-1">
    <button type="button" class="btn btn-primary btn-tn " (click)="moveUp()">
      Up
    </button>
  </div>
  <div class="col-1">
    <button type="button" class="btn btn-primary btn-tn " (click)="moveDown()">
      Down
    </button>
  </div>
</div>

КОД:

l: number = 0;
t: number = 0;
left = '0px';
top = '0px';

moveUp() {
  this.t -= 5;
  this.top = this.t + 'px';
}

moveDown() {

  this.t += 5;
  this.top = this.t + 'px';

}

moveLeft() {
  this.l -= 5;
  this.left = this.l + 'px';
}

moveRight() {
  this.l += 5;
  this.left = this.l + 'px';
}

Результат: изображение / видео перемещено и оставлено пустое место.

Мой вопрос: как сохранить изображение / видео на сцене при движении влево, вправо, вверх, вниз

Например, изображение (синее) будет удерживаться, когда изображение достигает верхнего и левого края сцены (желтого цвета).

Надеюсь, мое объяснение понятно. Любое предложение приветствуется.