Play Youtube Video on Link Click

Play Youtube Video on Link Click

I have a youtube videos inside the my wordpress loop, on that page, you'll
see that after clicking the image, the image will be hidden and the
youtube video will appear, also the same with the next item of the loop.
I'm not good in JS and Youtube API, that's why I wanted some help to..
Play the Youtube Video after clicking the image. Hre
Here is the code for the loop..
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class('clearfix'); ?>
role="article">
<header>
<div class="feature-img">
<?php
if(get_field('youtube_id'))
{ ?>
<div id="my-video-<?php the_ID(); ?>" class="my-video-container"
style="display:none;">
<div class="responsive-video">
<iframe src="http://www.youtube.com/embed/<?php echo
get_field('youtube_id'); ?>?rel=0&hd=1&autoplay=1"
style="position: absolute; top: 0; left: 0; width: 100%; height:
100%;" frameborder="0" webkitAllowFullScreen mozallowfullscreen
allowFullScreen></iframe>
</div>
</div>
<?php the_post_thumbnail('full', array('class' => 'featimg')); ?><a
class="video-play-button" href="#"></a>
<?php } else { ?>
<?php the_post_thumbnail('full', array('class' => 'featimg')); ?>
<?php } ?>
</div>
<div class="gallery-header">
<h3 class="single-title" itemprop="headline"><?php
the_title(); ?></h3>
</div>
</header> <!-- end article header -->
<section class="post_content clearfix" itemprop="articleBody">
<?php the_content(); ?>
</section> <!-- end article section -->
<?php endwhile; ?>
</article>
And the script
<script type="text/javascript">
(function( $ ) {
$(document).ready( function( ) {
$('.video-play-button').click(function() {
$(this).closest('.feature-img').find('.my-video-container').show();
$(this).siblings('.featimg').hide();
$(this).hide();
});
});
})(jQuery);
</script>
Any Help will be truly appreciated, Thanks.