Question

目标：一个干净的小网站，显示来自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

#container {
margin: 0 auto; 
padding: 0 20px 0 20px; 
height: auto;
width: 870px;
overflow: hidden;
opacity: 0.9;
}

#content {
position:absolute; 
top:50%; 
left: 50%;
height:auto;
width: 760px;
margin:-400px 0 0 -400px;
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;
}

Answer 1

你的CSS有点奇怪......

您可以删除iframe #content包装器上的绝对定位并删除奇怪的边距并替换为auto ..

#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;
}

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

Answer 2

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

＆＃13;

body {
  height: 100%;
}
#container {
  width: 870px;
  height: auto;
  opacity: 0.9;
}
#content {
  position: center;
  top: 50%;
  left: 50%;
  height: auto;
  width: 760px;
  margin: 0 auto;
  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;
}
footer {
  position: relative;
  height: 20px;
}

＆＃13;

<body>
  <div id="container">
    <div id="content">
      <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>
      <footer>
        <a href="mailto:tijnholwerda1@gmail.com">E-MAIL</a> // <a href="#" target="_blank">PHOTOGALLERY (COMING SOON)</a>
      </footer>
    </div>
  </div>
</body>

＆＃13;

嵌入Vimeo Player Glitch

2 个答案: