嵌入 Vimeo 播放器故障

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 wrapper 上的绝对定位并删除奇怪的边距并替换为 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

删除 overflow:hidden。我也整理了你的页脚。

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>

嵌入 Vimeo 播放器故障

Embed Vimeo Player Glitch

html

css

video

containers

embed