title: video tag bar position - html
body: <p>**See what I'm talking about here(<a href="http://jsfiddle.net/VpLyR/" rel="nofollow noreferrer">http://jsfiddle.net/VpLyR/</a>).
  <img src="https://i.stack.imgur.com/XPh6q.png" alt="enter image description here"></p>
  
  <p>I have a completely simple code contains a <code>video</code> tag (html) and a fixed position menu bar.
  The problem that when I scroll down till the menu bar and the video bar becomes on the same line, the video bar displays on the menu bar and hide it <img src="https://i.stack.imgur.com/NGAL9.png" alt="enter image description here">, but all what I want that the menu bar displays on the video bar and <b>hide</b> it.</p>