如何删除跨度并在点击时在该跨度下播放 youtube 视频？答案

【问题标题】：How to delete a span and play a youtube video under the span on click?如何删除跨度并在点击时在该跨度下播放 youtube 视频？
【发布时间】：2015-09-12 13:38:10
【问题描述】：

我有一个小型 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>

这是与之配套的 CSS：

a.img-link:link
{
text-decoration:none;
color:#556270;
font-family: Calibri, Arial, Helvetica, sans-serif;
font-size:1.2em;
}

a.img-link:hover
{
background-color:none;
}

ul.vid-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
width:100%;
}

ul.vid-list li {
display: inline-block;
margin: 0;
padding-top:0.7em;
position: relative;
width: 23%;
height:11em;
}

span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
left: 0;
position: absolute;
top: 0;
width: 100%;
height:11em;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}

ul.vid-list li:hover span.text-content {
opacity: 1;
}

span.text-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
}

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

有人可以帮忙吗？谢谢

【问题讨论】：

标签： html css youtube

【解决方案1】：

我很确定这是因为您的 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>

【讨论】：

非常感谢！没有注意到那些...现在“a”类有问题，但我会解决这个问题。
@NikolaPoljak 有问题吗？我可以帮忙。
@NikolaPoljak 如果我的回答有帮助，请点赞和/或接受！谢谢：D

【解决方案2】：

你可以试试这个：

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：

  <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>

【讨论】：