上點擊圖像隱藏YouTube自動播放

Question

需要一些幫助，請，

我在圖像上單擊時製作的無序列表一次一次從YouTube， 一個嵌入的iframe的圖像它取代隱藏iframe從圖像以上使用jQuery

的 .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，並使得你的代碼長期過於複雜。

我寫了一個小提琴來演示更優雅的方法，將視頻URL存儲在列表圖像上的數據屬性中，然後在click上插入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 
});