제이쿼리 스크롤업,다운 효과를 이용해 홈페이지제작(포트폴리오) 중입니다..

제가 생각한 효과는..(이미지 파일로첨부함)

<div id="wrap">
  <div id="header"></div>
  <div id="container">
   <div class="video_1">
    <video src="videos/Gondry.mp4" autoplay class="gondry" width="100%" height="100%"></video>
   </div>
   <div class="video_2">
    <video src="videos/Hello.mp4" controls class="gondry" width="100%" height="100%"></video>
   </div>
   <div class="video_3">
    <video src="videos/Island.mp4" controls class="gondry" width="100%" height="100%"></video>
   </div>
   <div class="video_4">
    <video src="videos/Mannequin.mp4" controls class="gondry" width="100%" height="100%"></video>
   </div>
   <div class="video_5">
    <video src="videos/See_You.mp4" controls class="gondry" width="100%" height="100%"></video>
   </div>
  </div>
  <div id="footer"></div>

이런식으로

mp4 비디오들을 밑으로 깔아놓은상태에서

메인페이지에 접속했을때 1번째 비디오만 오버플로우:히든 이 되있는 효과처럼 가로X세로 값이 100%를 차지하고있다가

스크롤 다운을 하게되면 2번째 비디오로 넘어가면서 2번째 비디오가 재생되게 하고싶습니다. 

헌데 페이지 창 자체를 드래그해서 줄여보면 가로값은 일정하게 줄어드는만큼 백분률값에 의해서 줄어드는데

세로값은 같이 줄어들지않아 밑에 깔려있던 비디오들이 보여지게됩니다..

도와주세요!