How to make youtube api onStateChange work from jquery?

Question

YouTube

Let's start with the file connection order:
1. jquery
2. myscript
3. youtubeapi
i.e. here:

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');

And we have html:

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

my code:

(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'); - flies by, but console.log('State is:', e.data); - at least kill, but no.

But what you need is, just $paper to hide when the user turns on the video, and show when it stops. But I can't even catch it.

Answer 1

When connecting the youtube lib, do not forget to enable enablejsapi to work with the API jsfiddle.net/br3t/fkcb7twg