Flexslider中的YouTube弹出视频

Question

我想在FlexSlider中用YT视频实现Magnific弹出插件。我部分完成了此工作，在自定义按钮YT上弹出视频开始，但是当视频开始缓冲时我无法暂停滑块。

我在网上找到了一些内容，用于YT API中的暂停和播放滑块，但我不知道如何在宏大的弹出窗口中执行此操作。

              

        <?php if( have_rows('slajder_repeater', 'options') ): ?>

            <?php while( have_rows('slajder_repeater','options') ): the_row();

             // vars

                $rizbor = get_sub_field('izbor_sadrzaja');
                $rslika = get_sub_field('slika');
                $rvideo = get_sub_field('video');
                $rUrl = get_sub_field('video', false, false);


                ?>   

            <li>
                <div class="gradient"></div>
                <?php if ($rizbor == 'slika'): ?> 
                <img src="<?php echo $rslika; ?>" alt="" />
                <?php elseif ($rizbor == 'video'): ?>
                <div class="video-container">
                    <div class="embed-container">  
                        <div id = "video-yt">
                            <?php
                                // use preg_match to find iframe src
                                preg_match('/src="(.+?)"/', $rvideo, $matches);
                                $src = $matches[1];


                                // add extra params to iframe src
                                $params = array(
                                    'enablejsapi'=> 1,
                                    'html5' => 1
                                );

                                $new_src = add_query_arg($params, $src);

                                $rvideo = str_replace($src, $new_src,   $rvideo);


                                // add extra attributes to iframe html
                                $attributes = 'frameborder="0"';

                                $rvideo = str_replace('></iframe>', ' ' . $attributes . '></iframe>',   $rvideo);


                                // echo $iframe


                                ?>
                            <?php echo $rvideo; ?>

                        </div>                                   
                    </div><!-- embed-container -->
                    <div class="header-overlay">                    
                        <div class="content">

                            <a href="<?php echo $rUrl; ?>" class="action video-popup">
                                <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/play.png" alt="play">
                            </a>
                        </div>                          
                    </div> <!-- header-overlay --> 
                </div><!-- video-container -->

                <?php endif ?>
            </li>   

        <?php endwhile; ?>          

        <?php endif; ?>
    </ul>

$('a.action').magnificPopup({
        type:'iframe',
        iframe: {
            markup: '<div class="mfp-iframe-scaler">'+
                    '<div class="mfp-close"></div>'+
                    '<iframe id="video" class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                     '</div>', 
            patterns: {
                youtube: {
                    index: 'youtube.com/', 
                    id: 'v=', 
                    src: '//www.youtube.com/embed/%id%?autoplay=1' 
                }
            },
            srcAction: 'iframe_src', 
        }


    });



var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/player_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    // $('iframe').attr('id', 'video');

    var player;
    youtubePlayers = [];

    onYouTubeIframeAPIReady = function () {
        player = new YT.Player('video', {
            // height: '',
            // width: '100%',

            // videoId: 'vraVU7VHiXk',  // youtube video id
            playerVars: {
                'autoplay': 0,
                // 'enablejsapi': 1

            },
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
        youtubePlayers[0] = player;
    }

    onPlayerStateChange = function (event) {
        if (event.data == YT.PlayerState.ENDED) {
            $('a.action').fadeIn('normal');
        }
        if (event.data == YT.PlayerState.PLAYING || event.data == YT.PlayerState.BUFFERING) {
            console.log( 'Playing / Buffering' );
             $('.flexslider').flexslider("pause");
        }
        else if (event.data == YT.PlayerState.ENDED || event.data == YT.PlayerState.PAUSED) {
            console.log('Ended / Paused');
            $('.flexslider').flexslider("play");
        }
    }

    function onPlayerReady(event) {

      // bind events
     $(document).on('click', 'a.action', function () {
        $(this).fadeOut('normal');
        // player.playVideo();
    });

      // var pauseButton = document.getElementById("pause-button");
      // pauseButton.addEventListener("click", function() {
      //   player.pauseVideo();
      // });

        var i = 0;
        for (i; i < youtubePlayers.length; i+=1) {
            // YouTube videos
            youtubePlayers[i].pauseVideo();
        }
    }

---

解决方案

我在大量的弹出式文档中找到了解决方法。

 $('a.action').magnificPopup({
        callbacks: {
            open: function() {
                // Will fire when this exact popup is opened
                // this - is Magnific Popup object
                $('.flexslider').flexslider("pause");
            },
            close: function() {
                // Will fire when popup is closed
                $('.flexslider').flexslider("play");
            }
            // e.t.c.
        },
        type:'iframe',
        iframe: {
            markup: '<div class="mfp-iframe-scaler">'+
                    '<div class="mfp-close"></div>'+
                    '<iframe id="video" class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                     '</div>', 
            patterns: {
                youtube: {
                    index: 'youtube.com/', 
                    id: 'v=' 
                    // src: '//www.youtube.com/embed/%id%?autoplay=1' 
                }
            },
            srcAction: 'iframe_src', 
        }

    });