Question

请寻求帮助，

我正在制作一个无序列表，只需一次来自youtube的嵌入iframe的图像，点击图片时，使用jquery的iframe和.replace函数替换上面隐藏.prev的图片

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

我写了一个小小提示来演示更优雅的方法，将视频网址存储在列表图像的数据属性中，然后在点击时插入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
});

单击图像上隐藏的Youtube自动播放

1 个答案: