使用点击图像在WordPress循环中播放YouTube视频

这是我在点击图像时播放Youtube视频的代码。。

HTML

    <div id="my-video" style="display:none;">
    <div class="responsive-video">
    <iframe src="http://www.youtube.com/embed/kCfP003Btjw?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>
    <div class="feature-img">
    <img src="http://yalleshleiron.com/ds/wp-content/uploads/2013/08/HP.jpg" class="featimg attachment-full wp-post-image" alt="HP">
<a class="video-play-button" href="#" id="imageID"></a>

jQuery

<script type="text/javascript">
(function( $ ) {   
$(document).ready( function( ) {                
$(\'#imageID\').click(function() {
$(\'#my-video\').show();
$(\'#imageID\').hide();
$(\'.featimg\').hide();
});

});
})(jQuery);      
</script>

我尝试在循环中使用它，但如果单击一个图像，它会播放循环中的所有视频。

这是代码

<?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" 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="#" id="imageID"></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>

我希望它是动态的，但我不知道怎么做。如有任何建议，将不胜感激，谢谢。

小码农CODE

相关推荐

Loop not showing first post