Jquery 隐藏的Youtube点击图像自动播放

需要帮忙吗

我正在制作一个无序列表，其中有一张图片，还有一张来自youtube的嵌入iframe， 单击图像时，它使用jquery的.replace和.prev函数从上面用隐藏的iframe替换图像

我想知道点击图像后，youtube视频是否可以自动播放，当将自动播放添加到youtube本身的参数时，它会从页面加载开始，即使设置为不显示

我只使用类来实现这一点，因为列表会越来越大，我不想为每个单独的id添加一些jquery。我不确定仅仅使用类是否可以做到这一点

有人能给我引路吗

这就是我到目前为止的想法：

javascript:

$('.coverimageforplayer').click(function () {
    $(this).replaceWith($(this).prev('li.showme').show());
});

html:

---

非常感谢

我将放弃showme列表项，因为这会添加不必要的html，并且从长远来看会使代码过于复杂

我写了一个小提琴来演示一种更优雅的方法，将视频url隐藏在列表图像的数据属性中，然后在单击时插入一个iframe，瞧

这是小提琴：

html：

javascript：

$('.coverimageforplayer').click(function () {
    $(this).replaceWith($(this).prev('li.showme').show());
});

---

我非常感谢您提供的宝贵帮助，我肯定会深入研究如何使用vars返回选择器。多谢各位much@user2666378没问题：

<ul>
    <li>autoplays:</li>
    <li class="coverimageforplayer" data-videoSRC="//www.youtube.com/embed/TZMoS2QBc8U?autoplay=1">
        <img src="http://www.nasa.gov/images/content/711375main_grail20121205_4x3_946-710.jpg" />
    </li>
    <li>Does not autoplay:</li>
    <li class="coverimageforplayer" data-videoSRC="//www.youtube.com/embed/TZMoS2QBc8U?autoplay=0">
        <img src="http://www.nasa.gov/images/content/711375main_grail20121205_4x3_946-710.jpg" />
    </li>
</ul>

$('.coverimageforplayer').on('click', function() {
    var element = $(this); // reuse variables for best practice. http://code.tutsplus.com/tutorials/quick-tip-jquery-newbs-stop-jumping-in-the-pool--net-22142
    var videoSRC = element.attr('data-videoSRC'); // Get the video URL from the data attribute
    var iframe = '<iframe width="480" height="360" src="'+videoSRC+'" frameborder="0" allowfullscreen></iframe>'; // create the iframe string
    element.html(iframe); // insert the iframe
});