Html 嵌入Vimeo播放器故障

目标：一个干净的最小站点，显示vimeo的酷视频，集中在屏幕上，带有徽标和一些文本。 该站点有一个背景，顶部有一个容器，容器居中，包含所有内容

问题: 将鼠标移到播放器上时，整个容器将消失：

链接：

我用容器尝试了不同的方法，打开和关闭了css的一部分，但似乎没有任何效果

代码HTML:

<div id="container" class="border">
<div id="content" class="border">
    <div class="logo border2"></div>
    <div class="text border2">
        <div class="wide_space">
        </div>  
            <iframe src="//player.vimeo.com/video/100941286?autoplay=0&amp;color=cf9999&amp;title=0&amp;byline=0&amp;portrait=0" width="740" height="416" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        <div class="narrow_space">
            <center><a href="mailto:tijnholwerda1@gmail.com">E-MAIL</a> // <a href="#" target="_blank">PHOTOGALLERY (COMING SOON)</a>
        </div>
    </div>
</div>  

---

你的CSS有点奇怪

您可以删除iframe#内容包装上的绝对定位，删除奇怪的边距并替换为自动

#content {
height:auto;
width: 760px;
margin:auto;
padding: 35px 20px 50px 20px;
background-color: white;
-moz-box-shadow:    0px 10px 50px 1px #353535;
-webkit-box-shadow: 0px 10px 50px 1px #353535;
box-shadow:         0px 10px 50px 1px #353535;
}

---

无论如何，这将为您带来更好的结果

删除溢出：隐藏。我也整理了你的页脚

正文{
身高：100%；
}
#容器{
宽度：870px；
高度：自动；
不透明度：0.9；
}
#内容{
位置：中心；
最高：50%；
左：50%；
高度：自动；
宽度：760px；
保证金：0自动；
背景色：白色；
-moz盒阴影：0px 10px 50px 1px 3535；
-网络工具包盒阴影：0px 10px 50px 1px 3535；
盒影：0px 10px 50px 1px 3535；
}
页脚{
位置：相对位置；
高度：20px；
}

// 

对于初学者来说，您的form.js是html。。。您有对丢失文件的引用。。不存在。。编辑：我看到iFrame是Vimeo这看起来很接近我想要的！屏幕顶部只有一个奇怪的细条？@emiliomemo所以细条是由一个边框造成的：1px固体，我已经移除了它。

#content {
height:auto;
width: 760px;
margin:auto;
padding: 35px 20px 50px 20px;
background-color: white;
-moz-box-shadow:    0px 10px 50px 1px #353535;
-webkit-box-shadow: 0px 10px 50px 1px #353535;
box-shadow:         0px 10px 50px 1px #353535;
}