嵌入Vimeo播放器故障

目标：一个干净的最小网站，显示来自vimeo的很酷的视频，以屏幕为中心，以及徽标和一些文字。该网站有一个背景，顶部有一个居中的容器，其中包含所有内容。

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

链接： http://yurapamba.com/

我用容器尝试了不同的东西，并打开和关闭了 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;
}

删除溢出

：隐藏。我也整理了你的页脚。

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

<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>

你的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;
}

无论如何，这会给你带来更好的结果

相关内容

最新更新

热门标签：