Use Click Image to Play Youtube Video in a WordPress Loop

Problem is here:

<div id="my-video" style="display:none;">

as you can see, id is static and is the same for all posts. First of all this is not compliant with html standard: tag id must be unique.

As a side effect if you use the id selector in jquery and the id is used a lot of times jquery apply function a lot of times…

So first you have to make id unique, in the loop use:

<div id="my-video-<?php the_ID(); ?>" class="my-video-container" style="display:none;"> 

For same reason change the code for the play button (you can remove imageID at all):

<a class="video-play-button" href="#"></a>

and change jquery like so:

  $('.video-play-button').click(function() {
    $(this).closest('.feature-img').find('.my-video-container').show();
    $(this).siblings('.featimg').hide();
    $(this).hide(); 
  });