how to get youtube player id and stop video

Question

From this answer for grabbing the player id, and this answer for stopping the video based on the player id, I have tried the following jQuery on a Wordpress site to get the youtube player id and stop the video:

var videoID = player.getVideoData()['video_id'];
$(videoID).get(0).stopVideo();

However, it's not working for me.

Help appreciated.

Edit: this page has two videos that are started by clicking the play buttons at bottom right under Latest Presentations. When the videos are closed, the containing div is simply hidden with CSS, and the video carries on playing in the background.

Edit2:

From zer00ne's answer, I've adapted the JavaScript to become:

 jQuery(document).ready(function() {
    jQuery('#toggle1').click(function(){
        jQuery('#video1').appendTo('body');
        jQuery('#video1').addClass('active');
        jQuery('#video2').removeClass('active');
        });
    jQuery('#toggle2').click(function(){
        jQuery('#video2').appendTo('body');
        jQuery('#video2').addClass('active');
        jQuery('#video1').removeClass('active');
    });
    jQuery('#close1').click(function(){
        jQuery('#video1').removeClass('active');
        var YT1 = $(this).next('iframe');
        YT1[0].contentWindow.postMessage(`{
            "event":"command",
            "func":"${'stopVideo'}",
            "args":""
        }`, '*');
    });
    jQuery('#close2').click(function(){
        jQuery('#video2').removeClass('active');
        var YT2 = $(this).next('iframe');
        YT2[0].contentWindow.postMessage(`{
            "event":"command",
            "func":"${'stopVideo'}",
            "args":""
        }`, '*');                    
    });                
});

however, this is not stopping the video when I click the X at top right of the video.

WordPress post editor can automatically [embed a YouTube video](https://www.youtube.com/watch?v=Ir7J0eEuWgk). Just copy/cut & paste the YT url into a post. — zer00ne, Apr 06 '18 at 05:45
Refer to the youtube iframe api to expore the possible solution, https://developers.google.com/youtube/iframe_api_reference. Once youtube player object is initialized in global scope, you can call player.stopVideo(); to stop playing the video. Make sure you enable enablejsapi=1 by passing this parameter to the embedded video. — Gaurav Mehra, Apr 06 '18 at 06:07
@Steve I tried both videos and the lightbox overlay blocks access to the close button. I'm using Win10 Chrome and cannot find a way to close the lightbox and I had to refresh the page. That's a bigger concern you should address. When you got that fixed, I can help resolve your question. — zer00ne, Apr 06 '18 at 06:15
Thanks @GauravMehra. A non-technical user will be entering video embed code, so I would prefer her not to have to edit the iframe url to add the extra parameter. I do not know how to automatically add the parameter via jQuery. — Steve, Apr 06 '18 at 06:46
I just looked at the code using firebug and seems like iframe is already having the parameter enablejsapi=1, So all you need to do is to initalize object with the player id and call the available methods on that object. — Gaurav Mehra, Apr 06 '18 at 07:25
Thanks @GauravMehra. I don't know how to do that. Also, I don't know how to make sure the embed code gets the `enablejsapi=1` parameter added to the iframe URL. — Steve, Apr 06 '18 at 07:45
(meaning, I manually added `?enablejsapi=1` to the iframe URL, but the non-technical user won't want to do that) — Steve, Apr 06 '18 at 09:00
@Steve forget about adding `?enablejsapi=1` you have it already, *but* keep that part in mind for future endeavors that require YouTube videos. See my answer, it's tailored to your situation and hopefully it's simple enough for others to follow as well. — zer00ne, Apr 07 '18 at 20:33

score 1 · Accepted Answer · answered Apr 06 '18 at 15:24

In the following Demo, the <iframe>s of the OP site and its 2 levels of ancestors plus its sibling were included. An ON / OFF button has been added for demonstration purposes.

jQuery was used as a convenient way to traverse the DOM. Plain JavaScript was used to access the <iframe> and use the PostMessage API to send the stopVideo command.

Demo - for a functioning Demo review the Plunk

<!doctype html>
<html>

<head>
  <meta charset='utf-8'>
  <style>
    body {
      background: #000;
      position: relative;
    }
    
    .mfp-container {
      opacity: 0;
      transition: 1s;
    }
    
    .mfp-content {
      position: relative;
      background: #000;
      width: 640px
    }
    
    .mfp-content p {
      position: absolute;
      right: 0;
    }
    
    .active {
      opacity: 1;
      transition: 1s;
    }
    
    #toggle {
      width: 10ch;
      height: 4ex;
      position: absolute;
      right: calc(50% - 5ch);
      top: calc(50% - 2ex);
      z-index: 1;
      outline: 15px solid rgba(255, 0, 0, 0.7);
      color: tomato;
    }
  </style>
</head>

<body>

  <div class="mfp-container" id="video1">
    <div class="mfp-content">
      <p>
        <img src="https://batmin.insightcomdes.com.au/wp-content/themes/wtc%2029.3.18/images/icons/close.png" alt="close video" width="20" height="20" id="close1">
      </p>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/q_dv3PoUAM0?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
  <button id='toggle' type='button'>ON / OFF</button>
  <div class="mfp-container active" id="video2">
    <div class="mfp-content">
      <p>
        <img src="https://batmin.insightcomdes.com.au/wp-content/themes/wtc%2029.3.18/images/icons/close.png" alt="close video" width="20" height="20" id="close2">
      </p>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/8GpbJGZ7LEs?enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script>
    $('#toggle').on('click', function() {
      $('.mfp-container').toggleClass('active');
    })
    $('.mfp-content p').on('click', function() {
      var MFP = $(this).closest('.mfp-container');
      var YT = $(this).next('iframe');
      MFP.removeClass('active');
      YT[0].contentWindow.postMessage(`{
     "event":"command",
     "func":"${'stopVideo'}",
     "args":""
    }`, '*');
    });
  </script>
</body>

</html>

I've tried to fit your solution into my code - see the edit to my question please. — Steve, Apr 09 '18 at 01:01
Hi zer00ne. Can I use similar code to automatically play the video when it is opened? — Steve, Apr 09 '18 at 01:25
Hi @Steve, most certainly the code is capable of playing when the lightbox is opened. In fact there's a way that you can use a link with no JavaScript to do that. — zer00ne, Apr 09 '18 at 01:32
Did you try adding the code to your site without any changes? All classes and properties match your layout. The exception is the `#toggle` button but that was for demo purposes. — zer00ne, Apr 09 '18 at 01:37
Yes, I did, I just changed `.mfp-content p` to `#toggle1` - see the code at the bottom of my question. — Steve, Apr 09 '18 at 02:46
There's a specific logic to the layout you already have, Properties and references set so it should work if unchanged. Once you understand why it works then you can modify it. It's important to get something working so it's a step forward. — zer00ne, Apr 09 '18 at 02:52
All I did was remove reference to `var MFP`, and changed `.mfp-content p` to `#toggle-1`. — Steve, Apr 09 '18 at 03:35
Your toggle is nested within the `
`. So `var YT2 = $(this).next('iframe');` now broken. — zer00ne, Apr 09 '18 at 10:12

how to get youtube player id and stop video

1 Answers1

Demo - for a functioning Demo review the Plunk