CODEWITHSUNDEEP
javascriptjquerywordpressyoutube
Dirty Bird Design
Dirty Bird Design

Reputation: 5523

Multiple YouTube players in iframe, select box to change channel - stop playing video

I have been stuck on this for a week. It was cleaner to create a new question than update a previous question. I have a simple WP template that has a select box:

<select name="channelChooser" id="channelChooser">
    <option value="" selected>Please Select Platform</option>
    <option value="cqgd_ytpl">CQG Desktop</option>
    <option value="sc_ytpl">Sierra Chart</option>
    <option value="cqgq_ytpl">CQG Q Trader</option>
</select>

Inside the template are one visible div, and 3 hidden div's. Using the select box I toggle the visible div so you can show / hide the YT Channel.

jQuery(document).ready(function() {
    $('#channelChooser').change(function () {
        var playerName = jQuery(this).closest('.embed-container').find('iframe').attr('id');
        if($(this).val() == 'cqgd_ytpl') {
           $('.ypt_wrapper').not('#cqgd_ytpl').hide();
           $('#cqgd_ytpl').show();
        } else if($(this).val() == 'sc_ytpl') {
            $('.ypt_wrapper').not('#sc_ytpl').hide();
            $('#sc_ytpl').show();
        } else if($(this).val() == 'cqgq_ytpl') {
            $('.ypt_wrapper').not('#cqgq_ytpl').hide();
            $('#cqgq_ytpl').show();
        }
    });
});

Unfortunately, if you start playing a video, then change the channel (show / hide div) the video keeps playing while no longer visible. I have tried using 'pauseVideo', 'stopVideo' etc and I get the same error '... is not a function'

How can I make a global stop function so that each time you use the select box you stop the currently playing video. $(.ytpl-playing).stopVideo(); gets 'ytpl-playing' is not defined.

Upvotes: 0

Views: 121

Answers (1)

Sathvik Chinnu
Sathvik Chinnu

Reputation: 575

You can check the working code here JSBin.

I just added the required code to achieve your task. Feel free to change it according to your needs.

jQuery(document).ready(function() {
        $('#channelChooser').change(function() {
            // $('#ytpl-player1').data("data-pl", this.value);
            var playerName = jQuery(this).closest('.embed-container').find('iframe').attr('id');
            if ($(this).val() == 'cqgd_ytpl') {
                $('.ypt_wrapper').not('#cqgd_ytpl').hide();
                $('#cqgd_ytpl').show();
                players["ytpl-player2"].stopVideo();
                players["ytpl-player3"].stopVideo();
            } else if ($(this).val() == 'sc_ytpl') {
                $('.ypt_wrapper').not('#sc_ytpl').hide();
                $('#sc_ytpl').show();
                players["ytpl-player1"].stopVideo();
                players["ytpl-player3"].stopVideo();
            } else if ($(this).val() == 'cqgq_ytpl') {
                $('.ypt_wrapper').not('#cqgq_ytpl').hide();
                $('#cqgq_ytpl').show();
                players["ytpl-player1"].stopVideo();
                players["ytpl-player2"].stopVideo();
            }
        });
      });

Upvotes: 2

Related Questions