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

Question

需要帮助，

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

我想知道点击图片后 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，并且从长远来看会使您的代码过于复杂。

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

这是小提琴：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
});