Как заставить api youtube onStateChange работать из под jquery?

Question

[Роман Якушев]

начнём с порядка подключения файлов:
1. jquery
2. myscript
3. youtubeapi
т.е. вот:

wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js');
    wp_enqueue_script('jquery');

wp_register_script('scripts', get_template_directory_uri() . '/js/scripts.js', array('jquery','fancybox','bootstrap-min'), '1.0.0');
    wp_enqueue_script('scripts');
    
    wp_register_script('youtube_iframe_api', 'https://www.youtube.com/iframe_api', array('scripts'));
    wp_enqueue_script('youtube_iframe_api');

И имеем html:

<iframe id="videoframe" class="embed-responsive-item" src="https://www.youtube.com/embed/...?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen=""></iframe>

мой код:

(function ($) {
    $(document).ready(function () {
$paper = $('#paper');
        var player;
        
        window.onYouTubeIframeAPIReady = function() {
            console.log('onYouTubeIframeAPIReady');
            player = new YT.Player('videoframe');
            console.log(player);
            
            player.addEventListener('onStateChange', function(event) {
                console.log('State is:', event.data);
                if (event.data == YT.PlayerState.PLAYING) {
                        $paper.slideUp();
                    } else {
                        $paper.slideDown();
                    }
            });
            
        }
    });//document ready
}) (jQuery);

console.log('onYouTubeIframeAPIReady'); - пролетает, а console.log('State is:', e.data); - хоть убейте, но нет.

А надо то, всего то $paper скрывать когда пользователь включит видео, и показывать когда остановит. Но у меня даже перехватить не получается.

Answer 1

[Владимир]

При подключении youtubовской либы не забывайте включать enablejsapi для работы с API jsfiddle.net/br3t/fkcb7twg

Comments

[Роман Якушев]

благодарю! всё заработало.