Не удается остановить воспроизведение видео на YouTube при закрытии всплывающего окна на странице с несколькими всплывающими окнами из цикла WordPress. - PullRequest
Новая
       6

Не удается остановить воспроизведение видео на YouTube при закрытии всплывающего окна на странице с несколькими всплывающими окнами из цикла WordPress.

0 голосов
/ 10 апреля 2019

Youtube видео во всплывающем окне продолжает воспроизводиться после закрытия всплывающего окна.На странице есть несколько видео во всплывающих окнах.Страница представляет собой цикл WordPress.

Мой код работает хорошо до того момента, когда мне нужно остановить воспроизведение видео.

Я почти уверен, что решение, вероятно, очень простое.За последние 2 дня я пробовал разные вещи, и я все еще не могу остановить воспроизведение видео, когда закрываю всплывающее окно.Мне только удалось получить первое видео, чтобы остановить воспроизведение с прокомментированной частью в моем вставленном коде.

<div class="project-box">
    <div id="close<?php the_permalink() ?>"></div>


    <div class="project-box-image">


        <div class="project-box-overlay">
            <div class="project-overlay-links">

                <a id="video-button" href="#<?php the_title(); ?>" class="button-link">Play video</a>
                <a class="button-link" href="<?php the_permalink() ?>">View Project</a>
            </div><!---project-overlay-links--> 
        </div><!---project-box-overlay-->


        <div id="<?php the_title(); ?>" class="popup-overlay">
            <div id="popup" class="popup">

                <a class="close"  href="#close<?php the_permalink() ?>">&times;</a>


                <div class="content">


                    <?php if( get_field('pop_up_video') ): ?>
                        <div class="video-embed" >
                        <div id="youtube">
                        <iframe width="800" height="400" src="<?php the_field('pop_up_video'); ?>?autoplay=0&rel=0&enable_js=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                        </div><!---youtube-->
                        </div><!---video-embed-->
                    <?php endif; ?>

                    <script>
                        $('.close').click(function(e) {
                            e.preventDefault();
                            //$('iframe').attr('src', '');
                            $('.popup-overlay').addClass('display-none');

                            /*$('.youtube').each(function(index) {
                                $(this).attr('src', $(this).attr('src'));
                                return false;
                            });

                        });*/


                        $('a#video-button').click(function(){
                            $('.popup-overlay').removeClass('display-none');

                        });                                         
                    </script>                                       


                </div><!---content-->
            </div><!---popup-->
        </div><!---overlay-->


        <?php the_post_thumbnail('service-box-image'); ?>
    </div><!---project-box-image-->


    <a href="<?php the_permalink() ?>">                     
        <h5><?php the_title(); ?></h5>
    </a>

    <div class="post-tags">
        <?php the_tags('', ', '); ?>
    </div><!---post-tags-->

    <p><?php the_excerpt(); ?></p>

</div><!---project-box-->

1 Ответ

1 голос
/ 10 апреля 2019

Если я правильно понимаю, у вас есть несколько всплывающих окон?Если это так, код для изменения src повлияет на все диалоги.

Я предполагаю, что вы меняете SRC, чтобы остановить видео.Кроме того, предполагая, что элемент .close_me находится внутри элемента .hide_overlay, вы можете сделать это: 

jQuery('.close_me').click(function (e) {
  var $videoEl = jQuery(this).closest('.hide_overlay').find('iframe');
  $videoEl.attr('src', $videoEl.attr('src'));
});

Это работает, потому что jQuery(this) будет нацелен на конкретную кнопку закрытия, связанную с этим одним всплывающим окном, а непредназначайтесь для всех всплывающих окон.

Технически, лучший способ остановить или приостановить видео - это использовать Youtube Javascript API , так как вы можете сделать что-то вроде: 

player.stopVideo();
...