Jquery 视频灯箱不工作

我试图添加一个视频灯箱到一个网站，但它不工作。这是我写的代码

<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/vid.png"  alt="" /><br /> Watch Video</a>

---

我很确定您的

onclick

处理程序无效

看看这个，看看是否有用

里面的代码是

HTML：

<div id="light" hidden>stuff</div>
<div id="fade" hidden>stuff</div>

<a id="watchVideo" href="javascript:void(0)">
    <img src="/images/vid.png"/>
    <br/> 
    Watch Video
</a>

document.getElementById("watchVideo").addEventListener("click", function displayVideo() {
    document.getElementById('light').hidden = false;
    document.getElementById('fade').hidden = false;
});

---

JSFIDLE链接不起任何作用。已编辑，请检查@ShenXu。