Html 如何删除跨度并在单击跨度下播放youtube视频？

我有一个小的youtube视频库，不能在加载时播放。将鼠标悬停在它们上方时，会出现一个带有说明的范围。我想跨度消失后，点击它和视频开始。似乎我可以让跨度消失，但视频不会开始

以下是HTML：

<ul class="vid-list">
<li>
<a class="img-link" href="#" onclick="{document.getElementById('vid1_span').remove(); document.getElementById("vid1_frame").src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1";}">
<iframe id="vid1_frame" width="90%" src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=0" frameborder="0" allowfullscreen> </iframe>
<span id="vid1_span" class="text-content"><span>Woohoo!</span></span>
</a>
</li>
</ul>

如果删除onclick中的第二个命令，则单击时会删除跨度。如果我把它放在那里，它不会删除跨度，也不会启动视频

---

有人能帮忙吗？谢谢

我很确定这是因为你的onclick有无效的引号：

<ul class="vid-list">
<li>
<a class="img-link" href="#" onclick="document.getElementById('vid1_span').remove(); document.getElementById('vid1_frame').src='http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1';">
<iframe id="vid1_frame" width="90%" src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=0" frameborder="0"     allowfullscreen> </iframe>
<span id="vid1_span" class="text-content"><span>Woohoo!</span></span>
</a>
</li>

您可以尝试以下方法：

Javascript:

<script type="text/javascript">
    $(document).ready(function () {
        $(".img-link").click(function () {
            $("#vid1_span").remove();
            $("#vid1_frame").attr("src", "http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1")
        });
    });
</script>

Html:

---

谢谢！我没注意到那些。。。“现在一个类有一个问题，但我会解决它的。”尼古拉波尔贾克问题？我可以帮忙。@NikolaPoljak如果我的回答有帮助，请投票和/或接受！谢谢：D

<script type="text/javascript">
    $(document).ready(function () {
        $(".img-link").click(function () {
            $("#vid1_span").remove();
            $("#vid1_frame").attr("src", "http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1")
        });
    });
</script>

  <ul class="vid-list">
    <li>
        <a class="img-link" href="javascript:void(0)">
            <iframe id="vid1_frame" width="90%" src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=0" frameborder="0" allowfullscreen> </iframe>
            <span id="vid1_span" class="text-content"><span>Woohoo!</span></span>
        </a>
    </li>
</ul>