Find a code to detect YouTube video end and hide related video on Wordpress

Question

I'm looking for a little help about creating a code snippet for Wordpress to auto detect when embed YouTube video ends and hide related video.

I found a code example on the Internet but was for a single video. Would be nice to be able to find a code that can work on Wordpress standard embed video and can detect the end of the video using YouTube API then just hide related video and show again the initial image of the video when the video ends.

I use the Wordpress gutemberg classic editor to embed videos. If i look at the article source code...

<iframe width="853" height="450" src="//www.youtube.com/embed/Sft-fasbVnY" allowfullscreen="allowfullscreen"></iframe>

I have a page where there are a lot of videos that are showed on more pages. I cannot customize the embed code for every video, I'm looking for a snipped code that can work for all videos like a plugin that never need to insert any code or meta tag to any existent videos.

Answer 1

I think the below can be useful:

function add_youtube_end_detect_script() {
    ?>
    <script>
    function onYouTubeIframeAPIReady() {
        var playerElements = document.querySelectorAll('iframe[src*="youtube.com/embed"]');
        for (var i = 0; i < playerElements.length; i++) {
            var player = new YT.Player(playerElements[i], {
                events: {
                    'onStateChange': function(event) {
                        if (event.data === YT.PlayerState.ENDED) {
                            event.target.classList.add('video-ended');
                        }
                    }
                }
            });
        }
    }

    var styles = document.createElement('style');
    styles.innerHTML = '.video-ended { pointer-events: none; }';
    document.head.appendChild(styles);
    </script>
    <?php
}
add_action('wp_footer', 'add_youtube_end_detect_script');

Add this code to the "functions.php" file of your WordPress theme

Answer 2

Try this one :

function add_youtube_end_detect_script() {
    ?>
    <script>
    function onYouTubeIframeAPIReady() {
        var players = document.querySelectorAll('iframe[src*="youtube.com/embed"]');
        for (var i = 0; i < players.length; i++) {
            var player = new YT.Player(players[i], {
                events: {
                    'onStateChange': function(event) {
                        if (event.data === YT.PlayerState.ENDED) {
                            var container = event.target.getIframe().parentNode;
                            container.classList.add('video-ended');
                        }
                    }
                }
            });
        }
    }

    var styles = document.createElement('style');
    styles.innerHTML = '.video-ended .ytp-pause-overlay { display: none !important; }';
    document.head.appendChild(styles);
    </script>
    <?php
}
add_action('wp_footer', 'add_youtube_end_detect_script');