CSS height auto have no height

Question

In responsive video player there is no height of height auto elements and is not working as it should. First, cover image should be over whole player and controls bar should be down. Like here:

There is no height of so I can't put height: 100% because everything goes wild. If I put height 100% on cover image, it disappears. Controls bar is stick to the top and can't be moved. I've been working like this for a years and never head problem like this.

Here is my code: 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 demo with play functionality

Don't use the <img> tag, rather use a responsive cover background-image for the .video_cover

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

All you need: (AKA: Total CSS remake):

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

If you need it here's the full 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>  

and 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"]();
  });
});