CSS高度自动没有高度

Question

在响应视频播放器，没有高度的高度，自动元素，并没有工作，它应该。首先，封面图像应该覆盖整个球员和控制栏应该是向下的。就像这里：

​

​

没有高度，所以我不能把高度: 100%，因为一切都是疯狂的。如果我把高度100%放在封面图像上，它就消失了。控件条粘在顶部，不能移动。我这样工作已经有一年了，从来没有遇到过这样的问题。

这是我的代码：JSFiddle

HTML

<section class="player">
    <video class="video">
        <source src="http://ridens.net/templates/default/player/videos/Ridens_promo_video_finish_mp4.ogv" type="video/ogg">
    </video>
    <div class="video_cover">
        <img src="http://ridens.net/templates/default/player/videos/promovideothumbnail.png">
    </div>
    <div class="controls">
        <div class="controls_bar">

        </div>
    </div>
</section>

CSS：

.player {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
}
.video {
    width: 100%;
    display: block;
    position: absolute;
    z-index: 20;
    top: 0;
    left: 0;
}
.video_cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 40;
}
.video_cover img {
    width: 100%;
    height: 100%;
}
.controls {
    position: absolute;
    z-index: 60;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.controls_bar {
    position: relative;
    z-index: 70;
    left: 5%;
    bottom: 0;
    background: #000;
    height: 100%;
    width: 100%;
}

Answer 1

具有播放功能的jsBin演示

不要使用<img>标记，而是为.video_cover使用响应性的cover背景图像。

<div class="video_cover"></div> <!-- Tada! no image! -->

您需要的一切：(又名:完全CSS重制作)：

.player { position: relative; }
.video { width: 100%; }
.video_cover {
  position: absolute;
  left:0;
  top:0;
  width: 100%;
  height: 100%;
  background: url(coverimage.png) 50% / cover;
}
.controls {
  position: absolute;
  width: 100%;
  bottom: 0;
  background: #000;
  height: 40px;
  color: #fff;
}

如果您需要它，下面是完整的HTML：

<section class="player">

  <video class="video">
    <source src="promo.ogv" type="video/ogg">
  </video>

  <div class="video_cover"></div>

  <div class="controls">
    <div class="controls_bar">
      <span id="play"></span>
    </div>
  </div>

</section>  

和jQuery：

var $pla = $('.player');
var $vid = $('.video');
var $cov = $('.video_cover');
var $con = $('.controls');

$con.hide();

$pla.hover(function(){
  $con.stop().slideToggle(250);
});

$('#play').html("►").click(function(){
  var pp = this.pp ^= 1;
  $(this).html(pp?"▐▐":"►");
  $cov.fadeToggle(700, function(){
    $vid[0][pp?"play":"pause"]();
  });
});