角2/4/5：如何在另一个元素内移动元素

Question

在Angular项目中，我正在使用CSS来将图像/视频元素移动到“舞台”元素内。

到目前为止我所拥有的：

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

结果：图像/视频已移动，并留有空白。

我的问题：向左，向右，向上，向下移动时如何将图像/视频保持在舞台内

例如，当图像到达舞台的顶部和左侧（黄色）时，将保留图像（蓝色）。

希望我的解释很清楚。任何建议表示赞赏。