Использование фонового видео с цветным наложением с высотой 100%

Я пытаюсь добавить фоновое видео с цветным наложением с прозрачностью.

Я уже создал структуру сайта, причем каждый раздел Div имеет высоту 100% и цвет фона. В первом разделе div я хочу воспроизвести видео, которое видно через прозрачный цвет фона.

Мне две проблемы, с которыми я сталкиваюсь, - это то, что видео захватывает веб-сайт, или это подталкивает контент вниз.

Вот демонстрационная версия: http://jsfiddle.net/NpgD5/248/

В настоящее время мой html выглядит так:

 <div class="top-section">
   <div id="bg"><video src="" id="bg-video" muted autoplay loop ></video></div>
    <nav> </nav>      
   <div id="center-column">
     <h1>WELCOME</h1>
   </div>
  <div class="mid1-section"></div>
  <div class="mid2-section"></div>
  <div class="bottom-section"></div>
 </div>

CSS:

html, body{
  background-color: #ECF0F1;
  min-height:100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}


#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 100%;
}


/*HTML5 VIDEO*/
#bg video {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 100%;
min-height: 50%;
}

.top-section{
background-color: #3498DB;
background-repeat: repeat;
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
z-index: 2;
}

.mid1-section{
  min-height:100%;
  width: 100%;
  background-color: #16A085;
  margin: 0;
  padding: 0;
  text-align: center;
  position: relative;
}

Любая обратная связь с благодарностью благодарит вас (Y)