html - 如何删除跨度并在点击时在跨度下播放 youtube 视频？

Question

我有一小部分 YouTube 视频，这些视频无法加载播放。将鼠标悬停在它们上方时，会出现一个带有描述的跨度。我希望跨度在单击它并开始播放视频时消失。似乎我可以让 span 消失，但视频无法开始......

这是 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”中的第二个命令，则跨度会在单击时被删除。如果我将它留在那里，它不会删除跨度，也不会开始播放视频。

有人可以帮忙吗？谢谢

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