视频背景Web项目

Question

我尝试这样做：

一个背景中有视频的网页，例如3个不同的按钮，当我点击一个按钮时，更改为其他视频背景，其他位置的其他按钮可以观看其他视频。

所以，我用视频背景解决了这个问题。

<div id="video1">
    <div class="boton">
      <div class="one"></div>
      <div class="two"></div>
      <div class="tree"></div>
    </div>
    <video width="100%" autoplay loop poster="bg.jpg">  
        <source src="Video01.mp4" type="video/mp4" />  
    </video>
</div>

<div id="video2">
    <div class="boton">
      <div class="one-a"></div>
      <div class="two-b"></div>
    </div>
    <video width="100%" autoplay loop poster="bg.jpg">  
        <source src="Video02.mp4" type="video/mp4" />  
    </video>
</div>


body{
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#video1{
position: fixed;
height: 100%; 
width: 100%; 
top: 0; 
left: 0;
z-index: -5;  
}

@media only screen and (max-width: 768px) {
video {display:none;}
body {background-image:url("image.png");}
}

.boton div {
  width: 20px;
  height: 20px;
  z-index: 1;
  position: fixed;
  background: #FFFFFF;
}
.one {
top: 20%; 
left: 70%;
}

.two {
top: 45%; 
left: 45%;
}

.tree {
top: 15%; 
left: 15%;
}

http://jsfiddle.net/k92udk5t/1/

我的问题是我如何做另一部分...因为我需要一些buttoms，而这个buttom需要打开另一个＆＃34;背景＆＃34;并隐藏第一个。