jquery - 点击图片时隐藏的 Youtube 自动播放

Question

需要一些帮助，请

我正在制作一个无序列表，其中包含一次来自 youtube 的嵌入 iframe 的图像，
单击图像时，它会将图像替换为隐藏的 iframe从上面使用 .replace和 .prev jquery的功能

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

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

有人可以指导我一点。

这是我到目前为止提出的:

javascript:

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

html:

<ul>
    <li class="showme" style="display:none">
        <iframe width="480" height="360" src="//www.youtube.com/embed/TZMoS2QBc8U?autoplay=0" frameborder="0" allowfullscreen></iframe>
    </li>
    <li class="coverimageforplayer">
        <img src="http://www.nasa.gov/images/content/711375main_grail20121205_4x3_946-710.jpg" />
    </li>
    <li class="showme" style="display:none">
        <iframe class="iframer_1" width="480" height="360" src="//www.youtube.com/embed/TZMoS2QBc8U" frameborder="0" allowfullscreen></iframe>
    </li>
    <li class="coverimageforplayer">
        <img src="http://www.nasa.gov/images/content/711375main_grail20121205_4x3_946-710.jpg" />
    </li>
</ul>

非常感谢你

Answer 1

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

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

这是 fiddle : http://jsfiddle.net/TxbHx/1/

html:

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

javascript:

$('.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
});