Вот мой код в Playing Youtube Video при щелчке изображения.
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://img.wordpressask.com/posts/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>
Я хочу, чтобы он был динамичным, но я не знаю, как это сделать. Любое предложение будет оценено, спасибо.
Проблема здесь:
<div id="my-video" style="display:none;">
как вы можете видеть, id статичен и одинаковый для всех сообщений. Прежде всего это не соответствует стандарту html: идентификатор тега должен быть уникальным.
В качестве побочного эффекта, если вы используете селектор id в jquery, а id используется много раз, jquery применяется функция много раз …
Поэтому сначала вы должны сделать id уникальным, в цикле использовать:
<div id="my-video-<?php the_ID(); ?>" class="my-video-container" style="display:none;">
По этой же причине измените код для кнопки воспроизведения (вы можете вообще удалить идентификатор изображения):
<a class="video-play-button" href="#"></a>
и измените jquery следующим образом:
$('.video-play-button').click(function() { $(this).closest('.feature-img').find('.my-video-container').show(); $(this).siblings('.featimg').hide(); $(this).hide(); });