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

Question

我有一小部分 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" 中的第二个命令，单击时将删除跨度。如果我把它留在那里，它不会删除跨度，也不会启动视频。

有人可以帮忙吗？谢谢

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>

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

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

How to delete a span and play a youtube video under the span on click?

html

css

youtube