Intereting Posts
Тип пользовательской публикации и таксономия при ошибке URL-адреса StoreFront WordPress theme: Как я могу создать новую домашнюю страницу с настраиваемым дизайном так же, как шаблон Изменить заголовок на основе выбора посетителя Общие настройки для поддомена WordPress отображение другого шаблона на основе типа сообщения Разбивка страниц не работает. плагин генерировал неожиданный вывод во время активации, но он пуст Несколько синхронных якорных вызовов на сервер не обновляют базу данных WordPress правильно Есть ли админ-крючок, который позволит мне читать переменную GET, пока не станет слишком поздно устанавливать заголовок Location В папке плагина BuddyPress, где я могу заменить URL-адрес входа в систему с помощью моего настраиваемого URL-адреса страницы входа? Отключить вход на многосайтовые веб-сайты Манипулирование панелями и полями для настройки? Возвращать ключи массива и значения get_posts не находит аргумент: post_name Покажите только внукам (используя get_terms)

Используйте Click Image для воспроизведения Youtube Video в WordPress Loop

Вот мой код в 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(); });