title: Showing/hiding HTML5 video player controls
body: <p>So I have created custom buttons/icons for HTML5 video player. Problem is, that I would like to hide these buttons, except progress bar, when mouse is not pointed on the video. </p>
  
  <p>I have used css :hover, but it only shows buttons when I am directly at them, but I would like to have effect that they show up when mouse is on video container, tho progress bar should remain.</p>
  
  <pre><code>#video-controls {
    opacity: 0;
  }
  
  #video-controls:hover {
    opacity: 1;
  }
  </code></pre>
  
  <p>Also, does anyone have idea how to move progress bar down to bottom when buttons aren't showing?</p>
  
  <pre><code>&lt;div id="video_container"&gt;
      &lt;video id="video"&gt;
          &lt;source src="video_new.mp4" type="video/mp4"&gt;
          &lt;source src="video_new.ogg" type="video/ogg"&gt;
      &lt;/video&gt;
    &lt;div id="video-controls"&gt;
      &lt;button type="button" id="play-pause"&gt;&lt;input type="image" src="icons/play.png" alt="play button icon"&gt;&lt;/button&gt;
  
      &lt;button type="button" id="mute"&gt;&lt;input type="image" src="icons/volume_on.png" alt="volume ON icon"&gt;&lt;/button&gt;
      &lt;button type="button" id="full-screen"&gt;&lt;input type="image" src="icons/fullscreen.png" alt="fullscreen button icon"&gt;&lt;/button&gt;
      &lt;div&gt;&lt;span id="currentTime"&gt;00:00&lt;/span&gt;&lt;/div&gt;&lt;div id="duration"&gt;&lt;span&gt;00:00&lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
   &lt;progress id="progress" value="0"&gt;
     &lt;span id="progress-bar"&gt;&lt;/span&gt;
   &lt;/progress&gt;
  &lt;/div&gt;
  </code></pre>