单击视频元素后显示隐藏的div

Question

我想实现一个函数，在点击视频元素后隐藏的div会被显示出来。我在onclick上运行这个函数：

function vid1(){
document.getElementById("vid1_a").style.display = "block";
}

我的视频元素看起来像这样

<video width="250" height="240" controls onclick="vid1()">
      <source src="css/test.mp4" type="video/mp4">
    Your browser does not support the video tag.
    </video> 

它的确有效，但只有当我点击视频的控制面板时，点击视频本身才会起作用，这对用户来说可能是违反直觉的。 尝试将视频放入单独的div来解决问题，但它是一样的，只有点击视频本身就会显示div。

我可以尝试其他任何想法吗？

编辑： 我以为我会禁用控件，但是没有办法启动视频。