Изображение заполнителя для нескольких видеороликов youtube

Question

В ходе некоторых исследований я выяснил способ отображения моего собственного эскиза, который нацелен на видео с YouTube, когда он щелкнут. Проблема, с которой я сталкиваюсь, заключается в том, что при нажатии на другое видео на странице начинают воспроизводиться оба миниатюры, а не только та, что они нацелены, так как они используют одни и те же классы. В jQuery я попытался настроить таргетинг только на .image, которое кликает, используя это и используя ближайших, родительских и родных братьев и сестер. Я могу просто напечатать их неправильно, но, будучи новичком, у меня возникают проблемы с этим.

HTML

<div class="youtube" style="display:none;"> 
    <iframe width="382" height="262" src="" wmode="transparent" frameborder="0" allowfullscreen></iframe> 
</div> 
<img src="img/example.jpg" width="382" height="262" class="image" /> 

JQuery

$('.image').click(function() { 
    $(this).hide(); 
    $('.youtube').show().find("iframe").attr("src","videourl?autoplay=1"); 
}); 

Answer 1

$('.image').click(function() { 
    startvideo = $(this).prev(); 
    $(this).hide(); 
    startvideo.show().find("iframe").attr("src","videourl?autoplay=1"); 
}); 

это займет предыдущий элемент и перед нашим <img class=".image"> есть <div class="youtube">
http://jsfiddle.net/6uhyM/

<img src="path/to/image.jpg" data-videourl="http://www.youtube.com/..."> 

$('.image').click(function() { 
     url = $(this).data("videourl") 
     startvideo = $(this).prev(); 
     $(this).hide(); 
     startvideo.show().find("iframe").attr("src",url); 
    }); 

Answer 2

это не работает?

$('.image').click(function() { 
    $(this).hide(); 
    var iframe = $(this).prev().show().find("iframe"); 
    iframe.attr("src",iframe.data(url)); 
}); 

Примечание: вам нужен <img class="image" /> следовать <div class="youtube"> сразу .. как в вашем примере .. поэтому несколько экземпляров будет:

<div class="youtube" style="display:none;"> 
    <iframe width="382" height="262" src="" data-url="url-1" wmode="transparent" frameborder="0" allowfullscreen></iframe> 
</div> 
<img src="img/example.jpg" width="382" height="262" class="image" /> 

<div class="youtube" style="display:none;"> 
    <iframe width="382" height="262" src="" data-url="url-2" wmode="transparent" frameborder="0" allowfullscreen></iframe> 
</div> 
<img src="img/example.jpg" width="382" height="262" class="image" /> 

<div class="youtube" style="display:none;"> 
    <iframe width="382" height="262" src="" data-url="url-3" wmode="transparent" frameborder="0" allowfullscreen></iframe> 
</div> 
<img src="img/example.jpg" width="382" height="262" class="image" /> 

Answer 3

Почему бы не просто держать сцепление на $(this)?

$('.image').click(function() { 
    $(this) 
     .hide() 
     .prev() 
     .show() 
     .find("iframe") 
     .attr("src","videourl?autoplay=1"); 
}); 

Answer 4

<img id="1" ... class="image" /> 
<img id="2" ... class="image" /> 

$('.image').click(function() { 
    var ID = $(this).attr('id'); 
    // Now you know what Video to play etc... 
});