video slide down

HTML

<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<button id='slideDown'>
slide down
</button>
<div id='container'>
<img src="https://peach.blender.org/wp-content/uploads/dl_vim.jpg?x11217" alt="">
<video src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4"></video>
</div>

CSS

#container {
  height: 180px;
  width: 320px;
  position: relative;
  display:none;
}
#container img {
  position: absolute;
  height: 180px;
  width: 320px;
  left:0;
  right:0;
  z-order: -1;
  float: left;
}

#container video {
  position: absolute;
  height: 180px;
  width: 320px;
  left:0;
  right:0;
  float: left;
  display: none;
}

JavaScript

$('#slideDown').on('click', function() {
  $('#container').slideDown(function(){
    $('video').show();
  })
})