구현된 화면

코드

마우스 스크롤을 내릴때 동영상이 따라와줘야 한다.
그것을 구현하려면 position: sticky; top: 0;을 활용하면 된다.
따로 위치를 지정해주지 않고 position: sticky;만 지정하면 기능이 작동하지 않는다. 꼭! 위치까지 지정을 해주어야 한다.

영상의 크기는 화면을 꽉 채울 수 있고, 창의 크기에 따라 변할수 있게
width: 100%; height: 100%;으로 설정해주었다.
영상의 크기가 너무 크지 않게 최대크기도 max-width: 1500px;로 설정해주었다.

/* Video Player */
.player {
  position: sticky;
  top: 0;
  text-align: center;
  background-color: var(--black-color);
  
}

.player video {
  width: 100%;
  height: 100%;
  max-width: 1500px;
}